«ОШИБКА в загрузчике Users/abc/node_modules/babel-core/index.js ?{«presets»:[«react»]} не вернул функцию «

#javascript #reactjs #webpack

#javascript #reactjs #webpack

Вопрос:

Когда я делаю 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
  

Ответ №1:

babel-core это ядро babel, это не загрузчик. Вы должны использовать :

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

Смотрите пример здесь

Не забудьте установить babel-loader с помощью npm.

Надеюсь, это поможет

Ответ №2:

в вашем webpack.config.js файл заставит загрузчик быть loader:babel-loader, и он будет работать. нет необходимости удалять

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