Having read a novel's worth of SO posts on webpack configurations I still can't get past the module parse failed
error.
package.json (not all of it)
"dependencies": {
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-es2015-webpack": "^6.4.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
}
structure
package.json
node_modules
.babelrc
client/
webpack.config.js
.babelrc # duplicated just for shits and giggles...
src/
index.jsx
components/
server/
index.js
//more stuff
client/webpack.config.js
var path = require('path'),
webpack = require('webpack');
module.exports = {
devtool: 'eval',
context: __dirname + '/src',
entry: [
'webpack-hot-middleware/client',
__dirname + '/src/index.jsx'
],
output: {
path: __dirname + '/public',
filename: 'bundle.js',
publicPath: 'http://localhost:12345'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.jsx$/,
include: __dirname + '/src',
loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'],
query: {
plugins: ['./babelRelayPlugin'],
presets: ['es2015', 'react']
}
}
]
}
};
.babelrc
{ "presets": ["react", "es2015", "stage-0"] }
client/src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './src/components/layout.jsx';
ReactDOM.render(<Layout />, document.querySelector('#app'));
Been poking in the dark modifying the webpack config and can't babel to transpile es6.
Recurring problems from other SO posts
Loaders
array has to be inside module
propertypresets
array to your .babelrc
npm install --save babel-preset-whatever
hot-loader
is depreciated, use babel-preset-react-hmre
At a loss.
Turns out my context
property was messing everything up, the errors were not that helpful though. Docs clearly state what context
does, guess I wasn't paying attention to that carefully enough.
//webpack.config.js
context: __dirname + '/client/src/',
target: 'web'
//index.jsx
//this will break everything
import Layout from './src/components/Layout.jsx'
//this will work
import Layout from './components/Layout.jsx'
I just switched that and everything works great now.