Tanveer Tanveer - 2 months ago 10
React JSX Question

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

When i'm doing webpack i'm getting into this error :

"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'));


package structure :

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

Answer

babel-core is the core of babel, it's not a loader. You should use :

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

See example here

Don't forget to install babel-loader using npm.

Hope this helps

Comments