glenjamin
commented
8 years ago The problem is almost certainly with the loaders section of the webpack config.
Do you get the same error if you use the webpack CLI with that config?
Maybe try dumping out the merged config to see if it looks as you'd expect. Other than that, study the webpack docs on loader config carefully - the main difference I can see is that you have "loaders" instead of "loader"
On 4 Mar 2016, at 22:42, Vasily Shelkov notifications@github.com wrote:
I have checked out the ultimate-hot-reloading-examples and played about with the configurations but nothing has been working. Appreciate anyone who can put some time to try and figure out the issue :) I feel like it's some stupid issue and I've just been looking at this all for too long.
Could really do with someone with some fresh eyes and suggestions to look over this. Have been banging my head getting hot loading working despite having it working in pure front-end application over with this error:
ERROR in ./src/client/index.js Module parse failed: /home/vasily/Programming/solid-octo-disco/src/client/index.js Line 1: Unexpected token You may need an appropriate loader to handle this file type. | import ReactDOM from 'react-dom'; | import React from 'react'; | import App from './App'; @ multi main The applications workflow is gulp run which uses nodeman and build-watches the project files:
gulp.task('build', function(done) { webpack(webpackConfig).run(onBuild(done)); });
gulp.task('build-watch', ['build'], function() { webpack(webpackConfig).watch(100, function(err, stats) { onBuild()(err, stats); nodemon.restart(); }); });
gulp.task('run', ['build-watch'], function() { nodemon({ execMap: { js: 'node', }, script: path.join(__dirname, 'build/server'), ignore: ['*'], ext: 'js', }).on('restart', function() { console.log('Reloading Nodemon'); }); }); The webpack config has hotloading if NODE_ENV !== 'production' ie 'development is:
const path = require('path'); var fs = require('fs'); const webpack = require('webpack'); const extend = require('extend');
const production = process.env.NODE_ENV === 'production' ? true : false;
// // Common configuration chunk to be used for both // client-side (client.js) and server-side (server.js) bundles // ----------------------------------------------------------------------------- const config = { module: { loaders: [ { test: /.js$/, loaders: ['babel'], include: path.join(__dirname, 'src'), } ] }, debug: !production, resolve: { extensions: ['', '.js', '.jsx'] }, }
// Calculate external dependencies for Webpack. Webpack searches for these // packages in the node_modules instead of packing them into the bundle. var nodeModules = {}; fs.readdirSync('node_modules') .forEach(function(mod) { if (mod !== '.bin') { nodeModules[mod] = 'commonjs ' + mod; } });
// // Configuration for the server-side bundle (server.js) // ----------------------------------------------------------------------------- const serverConfig = extend(true, {}, config, { entry: './src/server/server.js', target: 'node', output: { path: path.join(dirname, 'build'), filename: 'server.js', }, node: { dirname: true, __filename: true, }, externals: nodeModules, plugins: [], });
// // Configuration for the client-side bundle (client.js) // ----------------------------------------------------------------------------- const clientConfig = extend(true, {}, config, { entry: production ? './src/client/index.js' : [ 'eventsource-polyfill', //necessary evil for hot loading with IE 'webpack-hot-middleware/client', './src/client/index.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: '/public/', }, plugins: production ? [ new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { // jscs:disable requireCamelCaseOrUpperCaseIdentifiers screw_ie8: true,
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers warnings: false, }, }), new webpack.optimize.AggressiveMergingPlugin(), ] : [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]});
module.exports = [ serverConfig, clientConfig ]; and have a .babelrc file for transpiling from es6->es5.
{ "presets": ["react", "es2015", "stage-2"], "env": { "development": { "presets": ["react-hmre"] } } } When I change the index.js file and App.js to es5 syntax I get this error instead:
ERROR in ./src/client/index.js Module parse failed: /home/vasily/Programming/solid-octo-disco/src/client/index.js Line 5: Unexpected token < You may need an appropriate loader to handle this file type. var App = require('./App'); ReactDOM.render( , document.getElementById('app')); @ multi main My server uses the webpack-dev-middleware/webpack-hot-middleware only when not in production:
import express from 'express'; import path from 'path'; import webpack from 'webpack'; import clientConfig from '../../webpack.config.js'; import 'babel-register';
const app = express(); const port = process.env.PORT || 3000;
console.log(clientConfig[1]); //In development hotload React using webpack-hot-middleware if (!(process.env.NODE_ENV === 'production')){ const compiler = webpack(clientConfig[1]);
app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, publicPath: clientConfig[1].output.publicPath })); app.use(require('webpack-hot-middleware')(compiler, { log: console.log }));} //--------------------------------------------------------------------------
app.use('/public', express.static('public'));
app.get('*', (req, res) => { res.sendFile('index.html', { root: 'public' }); });
// Listen on port 3000, IP defaults to 127.0.0.1 (localhost) app.listen(port, (err) => { if (err) { console.log(err); return; }
console.log('Server running at http://localhost: ' + port); }); and lastly my installed packages and in package.json:
"dependencies": { "express": "^4.13.4", "extend": "^3.0.0", "react": "^0.14.7", "react-dom": "^0.14.7" }, "devDependencies": { "babel-cli": "^6.6.4", "babel-core": "^6.5.2", "babel-eslint": "^5.0.0", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", "babel-preset-react-hmre": "^1.1.0", "babel-preset-stage-2": "^6.5.0", "babel-register": "^6.6.0", "babel-runtime": "^6.6.1", "chai": "^3.5.0", "codacy-coverage": "^1.1.3", "coveralls": "^2.11.8", "eslint": "^2.2.0", "eslint-config-airbnb": "^6.0.2", "eslint-plugin-babel": "^3.1.0", "eslint-plugin-react": "^4.1.0", "eventsource-polyfill": "^0.9.6", "gulp": "^3.9.1", "istanbul": "^0.4.2", "jscs": "^2.11.0", "mocha": "^2.4.5", "mocha-lcov-reporter": "^1.2.0", "nodemon": "^1.9.1", "webpack": "^1.12.14", "webpack-dev-middleware": "^1.5.1", "webpack-hot-middleware": "^2.9.1" } — Reply to this email directly or view it on GitHub.
VasilyShelkov
hutber
I have checked out the ultimate-hot-reloading-examples and played about with the configurations but nothing has been working. Appreciate anyone who can put some time to try and figure out the issue :) I feel like it's some stupid issue and I've just been looking at this all for too long.
Could really do with someone with some fresh eyes and suggestions to look over this. Have been banging my head getting hot loading working despite having it working in pure front-end application over with this error:
The applications workflow is
gulp runwhich uses nodeman and build-watches the project files:The webpack config has hotloading if NODE_ENV !== 'production' ie 'development is:
and have a .babelrc file for transpiling from es6->es5.
When I change the index.js file and App.js to es5 syntax I get this error instead:
My server uses the webpack-dev-middleware/webpack-hot-middleware only when not in production:
and lastly my installed packages and in package.json: