Question

当我在做webpack时，我遇到了这个错误：

ERROR in loader Users/abc/node_modules/babel-core/index.js?{"presets":["react"]} didn't return a function

webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {`enter code here`
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-core',
        query: {
               presets: ['react']
            }
      }
    ]
  }
};

的index.html

<html>
    <head>
        <title>React JSX (Precompiled) demo</title>
    </head>
    <body>
        <div id="mycontainer"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

main.js

var React = require('react');
var ReactDOM = require('react-dom');

var ReactComponent = React.createClass({
  render : function(){
  return(  <div>
    <h1>Welcome to React Js! </h1>
    </div>
  );
  }
});

ReactDOM.render(<ReactComponent/>,document.getElementById('mycontainer'));

包结构：

app 
  |
  |-src
   |
   |-main.js
  |-index.html
  |-webpack-config.js

Answer 1

babel-core是巴贝尔的核心，它不是装载机。你应该使用：

loader: 'babel-loader' // Or just 'babel'

参见示例here

不要忘记使用npm安装babel-loader。

希望这有帮助

Answer 2

webpack.config.js 文件中的

使加载程序成为加载程序：babel-loader ，它会起作用。无需卸载

module:{
    loaders:[
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }
    ]
}

“加载器中的错误用户/ abc / node_modules / babel-core / index.js？{”presets“：[”react“]}没有返回函数”

2 个答案: