Question

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',
       options: {
        presets: [
          ["es2015", { "modules": false }]
        ]
       }
  },
  {
    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).

EDIT I am now trying with the older version of Webpack 1.15.0 and have removed Sass-loader but still get the same problem

Answer 1

在webpack.config.js

中使用此功能

module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-1']       
                }
            }
        ]
    }

Answer 2

尝试将index.js重命名为index.jsx

Answer 3

我添加了预设，似乎正在运作

Webpage.config.js文件的一部分......

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-1']       
                }
        ,{ test: /\.css$/, loader: 'style-loader!css-loader'}
      }
}

我在解析CSS时有一个不同的问题，但是使用css-loader修复了这个问题。

Webpack error unable to parse JSX

3 个答案: