Question

我是世界新手的反应，我有一个不会让我进步的错误。这是我的webpack

module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel'
 }]
}
resolve: {
 extensions: ['', '.js', '.jsx']
},
devServer: {
 historyApiFallback: true,
 contentBase: './'
}
};

这是我的代码js

import React from 'react';
import ReactDOM from 'react-dom';

import SearchBar from './components/search_bar';

const API = '';

const App = () => {
 return (
     <div>
         <SearchBar />
     </div>
 );
}

ReactDOM.render(<App />, document.querySelector('.container'));

这是错误 https://gyazo.com/be83135be6f0e7b8ca0c2852536c792f

我试过这个解决方案，但它不起作用 babel-loader jsx SyntaxError: Unexpected token

这是一个项目https://github.com/jmrosdev/Practicas/tree/master/React/youtube-search

再见，谢谢！

Answer 1

失败是因为Babel无法识别JSX语法。所以你需要安装一个或两个babel预设：

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

如果您还没有项目的根目录，请在项目的根目录下创建.babelrc文件。它应该有这个内容

{
    "presets": ["es2015", "react"]
}

Answer 2

我遇到了同样的错误，原因是 type =“text / babel”缺失：

 <script src="./index.js" type="text/babel"></script>

Answer 3

您很可能不会使用babel-react预设。

请确保您的相关内容，package.json文件（如果您没有npm install babel-core babel-preset-es2015 babel-preset-react -D）以及loaders部分webpack.config.js部分中包含该内容制作此行

    module: {
     loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
     }]
    }

进入这个

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

}]

意外的令牌 - React babel

3 个答案: