#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/
}
]
}