Question

我正在使用Rails 5与webpack 2.1.0-beta.7做出反应。使用gem＆＃39; react-rails＆＃39;，＆＃39;〜＆gt; 1.7.0＆＃39;

但是每次尝试运行webpack时都会出现此错误。

Hash: 3aea6d8a27453c0be041
Version: webpack 2.1.0-beta.7
Time: 507ms
    + 1 hidden modules

ERROR in ./app/assets/frontend/main.jsx
Module build failed: SyntaxError: /mnt/data/Projects/kasih.in-dev/kasih.in/app/assets/frontend/main.jsx: Unexpected token (5:8)
  3 |   render() {
  4 |     return (
> 5 |         <h1>Hello world</h1>
    |         ^
  6 |     );
  7 |   }
  8 | }
    at Parser.pp.raise (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/mnt/data/Projects/kasih.in-dev/kasih.in/node_modules/babylon/lib/parser/util.js:89:8)

这是我的webpack配置：

module.exports = {
    entry: "./app/assets/frontend/main.jsx",
    output: {
        path: __dirname + "/app/assets/javascripts",
        filename: "bundle.js"
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx$/, loader: "babel-loader" }
        ]
    }
};

如果你需要它，这是我的jsx文件：

class Main extends React.Component {
  render() {
    return (
        <h1>Hello world</h1>
    );
  }
}

let documentReady = () => {
  React.render{
    <Main />,
    document.getElementById('main');
  };
};

$(documentReady);

我想知道这个错误的原因是什么以及如何修复它？

Answer 1

您需要安装多个软件包，react和es2015，

npm i --save-dev babel-preset-react babel-preset-es2015

然后将这些预设添加到您的webpack配置

loaders: [{ 
  test: /\.jsx$/, 
  loader: "babel-loader", 
  query: { 
    presets: ['es2015', 'react']  
  } 
}]

Webpack意外令牌错误

1 个答案: