Webpack 错误无法解析 JSX答案

【问题标题】：Webpack error unable to parse JSXWebpack 错误无法解析 JSX
【发布时间】：2017-04-28 06:52:27
【问题描述】：

我在 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.

在将 webpack 升级到新版本后出现此错误。版本："webpack": "^2.4.1", "webpack-dev-server": "^1.14.0" 不太确定问题是什么。这是 webpack 配置：

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: './'   } };

问题在于 Sass-loader 与旧版本的 Webpack（版本

编辑我现在正在尝试使用旧版本的 Webpack 1.15.0 并删除了 Sass-loader 但仍然遇到同样的问题

【问题讨论】：

你之前有哪个webpack版本？
它是 webpack v 1.15.0（在 devDependencies 中）
解决了吗？我认为您没有在第一条规则test: /\.jsx?$/, 中测试 .js，这可能会导致无法转译 JSX
@eerstream 仍然没有解决。你能解释一下我需要做什么吗？
@eersteam ? 表示零或一，该模式匹配 .js 和 .jsx 扩展名。

标签： javascript node.js sass webpack babeljs

【解决方案1】：

在你的 webpack.config.js 中使用它

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 解决。

【讨论】：