Reputation: 992
I've previously used react.js a bit for some of my own components in some simple web pages, importing from a CDN, avoiding JSX, and using ES6 without any transformation. Now I'm trying to figure out the larger tool-set around react, using webpack and babel. Node and npm are also new to me.
I'm having a heck of a time figuring out why babel is not getting called to transpile my JSX in index.js. I had things working with just webpack, just trying to do a console.log message called from the resulting bundle.js, and that worked fine (before I tried to add react, babel, JSX or other dependencies). I tried putting the babel configuration presets into a babelrc.js file at the project root instead of in the webpack.config.js loader, but that didn't seem to make any difference. I've looked at a bunch of bare-bones tutorials, but they all seem to do things slightly different, making it very hard to figure out exactly what devDependencies I need (i.e., babel-cli, or babel, or babel-loader, etc.) and the I'm not sure if I've ended up with some version-incompatibilities or something.
I do get the following npm warnings when acquiring pacakges:
npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 ||
=5.10"} current: {"node":"5.4.1","npm":"3.3.4"}) npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN install Couldn't install optional dependency: Unsupported npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || =5.10"} (current: {"node":"5.4.1","npm":"3.3.4"}) npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || >=5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})
I haven't tried to change my node version, in case that might cause compatibility issues with my development environment (Windows 10/VS2017).
The npm log contains an error message that includes the following, which makes me think that babel is not getting called to do the transformation:
ERROR in ./index.js Module parse failed: C:\Users\Paul\source\WebSites\MinimalReact\index.js Unexpected token (8:15) You may need an appropriate loader to handle this file type. | export class MySpan extends React.Component { | render() { |
return Hello!; | } | };
Environment: IDE: Visual Studio 2017 CE, node v5.4.1, npm v3.3.4,
package.json:
{
"version": "0.0.1",
"name": "test_react",
"private": true,
"devDependencies": {
"webpack": "^2.5.1",
"babel-loader": "7.1.2",
"babel-cli": "6.14.0",
"babel-preset-react": "6.11.1",
"babel-preset-es2015": "6.14.0",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": { "build": "webpack --config webpack.config.js" }
}
webpack.config.js:
"use strict";
module.exports = {
entry: "./index.js",
output: {
filename: "./bundle.js",
libraryTarget: "var",
library: "MyModule"
},
module: {
loaders: [
{
test:"/\.js$/",
exclude: "/node_modules/",
loader: "babel-loader",
query: {
presets:["es2015", "react"]
}
}
]
}
};
index.js:
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class MySpan extends React.Component {
render() {
return <span>Hello!</span>;
}
};
function showContent() {
var div = document.getElementById("display");
ReactDOM.render(<MySpan/>, div);
};
export { MySpan, showContent};
Upvotes: 0
Views: 629
Reputation: 6037
Ah, realized the issue. Your test
and exclude
values should be regexes, not strings. Remove the outer quotes to solve the problem.
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
Upvotes: 1