My application was running fine until last week when I start running it in development mode (webpack hot development) as usual; It starts scanning files that have never changed and kept reloading the project. Recently, it got even worse - start crawling into my node_modules folder and reloading by each file, and eventually crashed.
It has never happened before until recently, and I have no idea what caused it to behave like that suddenly.
command prompt logs
[1] 📉 Initial data loaded, starting server...
[1] ----
[1] ==> ✅ HTM Owners Portal is running, talking to API server at http://localhost:3335.
[1] ==> 💻 Open http://localhost:3000 in a browser to view the app.
[0] webpack building...
[1] [piping] File src\constants.js has changed, reloading.
[1] [piping] File src\components\Dialog\Dialog.js has changed, reloading.
[1] internal/process.js:183
[1] throw util._errnoException(err, 'kill');
[1] ^
[1]
[1] Error: kill ESRCH
[1] at Object._errnoException (util.js:1024:11)
[1] at process.kill (internal/process.js:183:18)
[1] at FSWatcher.<anonymous> (C:\Users\mok\Documents\portal\node_modules\piping\lib\piping.js:87:19)
[1] at emitTwo (events.js:126:13)
[1] at FSWatcher.emit (events.js:214:7)
[1] at FSWatcher.<anonymous> (C:\Users\mok\Documents\portal\node_modules\chokidar\index.js:196:15)
[1] at FSWatcher._emit (C:\Users\mok\Documents\portal\node_modules\chokidar\index.js:238:5)
[1] at FSWatcher.<anonymous> (C:\Users\mok\Documents\portal\node_modules\chokidar\lib\nodefs-handler.js:263:16)
[1] at FSReqWrap.oncomplete (fs.js:153:5)
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! portal@0.1.0 start-dev: `better-npm-run start-dev`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the portal@0.1.0 start-dev script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR! C:\Users\mok\AppData\Roaming\npm-cache\_logs\2018-06-21T01_10_39_440Z-debug.log
[1] npm run start-dev exited with code 1
--> Sending SIGTERM to other processes..
[2] gulp watch --gulpfile semantic/gulpfile.js exited with code 1
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! portal@0.1.0 watch-client: `better-npm-run watch-client`
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the portal@0.1.0 watch-client script.
[0] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[0] npm run watch-client exited with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! owners-portal@0.1.0 dev: `concurrently --kill-others "npm run watch-client" "npm run start-dev" "gulp watch --gulpfile semantic/gulpfile.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portal@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mok\AppData\Roaming\npm-cache\_logs\2018-06-21T01_10_40_197Z-debug.log
After reading a few related issues on the GitHub
- https://github.com/mdlawson/piping/issues/10
- https://github.com/nodejs/node/issues/4852
- https://github.com/erikras/react-redux-universal-hot-example/issues/638
I realized updating the piping module version to ^1.0.0-rc.1 or above should fix the problem.
TL;DR
However, the next day I ran it again, it starts showing me the similar behavior again, but it didn't crash my command prompt when starting, only worse: when I start changing a code or a file, it would go into my node_modules and reload ten or hundred times:
command prompt logs (when I change a file)
[0] webpack built e36ced9f06f9f77a7631 in 1203ms
[0] webpack building...
[1] [piping] File node_modules\react-dom\lib\ReactDOM.js has changed, reloading.
[1] [piping] File node_modules\react-dom\lib\ReactDOMFeatureFlags.js has changed, reloading.
[1] [piping] File node_modules\lodash\_parent.js has changed, reloading.
[1] [piping] File node_modules\lodash\flatten.js has changed, reloading.
[1] [piping] File node_modules\lodash\now.js has changed, reloading.
[1] [piping] File node_modules\lodash\_basePickBy.js has changed, reloading.
[1] [piping] File node_modules\lodash\_asciiSize.js has changed, reloading.
[1] [piping] File node_modules\lodash\_unicodeSize.js has changed, reloading.
[1] [piping] File node_modules\lodash\_arrayAggregator.js has changed, reloading.
[1] [piping] File node_modules\lodash\_baseAggregator.js has changed, reloading.
// more
command prompt logs (when starting in dev-mode)
[1] Executing script: start-dev
[1]
[0] Executing script: watch-client
[0]
[1] to be executed: "node ./bin/server.js"
[0] to be executed: "node webpack/webpack-dev-server.js"
[2] [15:24:29] Working directory changed to ~\Documents\portal\semantic
[1] [piping] File node_modules\core-js\library\modules\web.immediate.js has changed, reloading.
[0] ==> 🚧 Webpack development server listening on port 3001
[1] [piping] File node_modules\babel-plugin-transform-es2015-classes\lib\loose.js has changed, reloading.
[1] [piping] File node_modules\babel-helper-remap-async-to-generator\lib\for-await.js has changed, reloading.
[1] [piping] File node_modules\react\lib\React.js has changed, reloading.
[2] [15:24:45] Using gulpfile ~\Documents\htm-owner-portal\semantic\gulpfile.js
[2] [15:24:45] Starting 'watch'...
[2] Watching source files for changes
[1] [piping] File node_modules\react-dom\lib\ReactComponentBrowserEnvironment.js has changed, reloading.
[1] [piping] File node_modules\react-dom\lib\getEventCharCode.js has changed, reloading.
[1] [piping] File node_modules\lodash\_arrayMap.js has changed, reloading.
[1] [piping] File bin\server.js has changed, reloading.
[1] [piping] File node_modules\webpack-isomorphic-tools\babel-transpiled-modules\tools\log.js has changed, reloading.
[1] [piping] File node_modules\react\lib\React.js has changed, reloading.
[1] [piping] File node_modules\htmlparser2\lib\Parser.js has changed, reloading.
[1] [piping] File node_modules\domutils\lib\traversal.js has changed, reloading.
[1] [piping] File node_modules\react-router\lib\PromiseUtils.js has changed, reloading.
[1] [piping] File node_modules\redux-actions\lib\handleActions.js has changed, reloading.
[1] [piping] File node_modules\formidable\lib\multipart_parser.js has changed, reloading.
[1] [piping] File node_modules\semantic-ui-react\dist\commonjs\lib\classNameBuilders.js has changed, reloading.
[1] [piping] File node_modules\semantic-ui-react\dist\commonjs\elements\Label\LabelDetail.js has changed, reloading.
[1] [piping] File node_modules\lodash\_baseInRange.js has changed, reloading.
[1] [piping] File node_modules\airbnb-prop-types\build\componentWithName.js has changed, reloading.
This is my piping module version (please let me know if you need any more information):
npm-shrinkwrap.json
"piping": {
"version": "1.0.0-rc.4",
"resolved": "https://registry.npmjs.org/piping/-/piping-1.0.0-rc.4.tgz",
"integrity": "sha1-d1oUz2UapC7ltKrKs1SMUXShXw=",
"requires": {
"chokidar": "1.7.0",
"colors": "1.1.2",
"lodash": "4.17.10"
}
}
package.json
"piping": "^1.0.0-rc.4",
webpack development config
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
// merge global and dev-only plugins
var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;
// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
// the babel plugin react-transform-hmr manually here.
// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
var plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
if (!reactTransform) {
reactTransform = ['react-transform', {transforms: []}];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}
// make sure react-transform-hmr is enabled
reactTransform[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css/, loader: 'style!css?importLoaders=1&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version' },
{ test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true
}),
webpackIsomorphicToolsPlugin.development()
]
};
Anyone else is facing this issue or anyone has any idea how to fix this?
Any help is appreciated
from Piping module scanning all unrelated files
No comments:
Post a Comment