Monday, 24 April 2017

Webpack error unable to parse JSX

I am hitting this issue building my code on Cloud9 (Linux)

>

   http://localhost:8080/webpack-dev-server/
>         webpack result is served from /
>         content is served from ./
>         404s will fallback to /index.html
>         Hash: 126cd080ff3d14fea7af
>         Version: webpack 2.4.1
>         Time: 657ms
>             Asset     Size  Chunks             Chunk Names
>         bundle.js  3.77 kB       0  [emitted]  main
>         chunk    {0} bundle.js (main) 1.05 kB [entry] [rendered]
>             [0] ./src/index.js 1.02 kB {0} [built] [failed] [1 error]
>             [1] multi ./src/index.js 28 bytes {0} [built]
>         
>         ERROR in ./src/index.js
>         Module build failed: SyntaxError: Unexpected token (29:16)
>         
>           27 | }
>           28 | 
>         > 29 | ReactDOM.render(<Provider store={store}>
>              |                 ^
>           30 |     <Router history={browserHistory}>
>           31 |       <Route path="/" component={App}>
>           32 |         <IndexRoute component={Welcome} />
>         
>          @ multi ./src/index.js
>         webpack: Failed to compile.

I am getting this error after upgrading webpack to a newer version. The versions: "webpack": "^2.4.1", "webpack-dev-server": "^1.14.0" Not really sure what the problem is. Here is webpack config: module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.scss$/, // regex to select only .css files use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader:"sass-loader" } ] // loader: 'style-loader!css-loader!sass-loader'
} ] // the sass-loader converts the sass into css, the css-loader puts that css into the JS, the style-loader puts the javascript into the DOM. }, resolve: { extensions: [ '.js', '.jsx', '.css'], modules: [ "node_modules" ] }, devServer: { historyApiFallback: true, contentBase: './' } };
The issue was that Sass-loader was incompatible with the older version of Webpack (version < 2).



via JohnnyBizzle

No comments:

Post a Comment