Problems getting webpack to call babel to transpile JSX in simple react.js setup.

Question

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 webpack@2.7.0: wanted: {"node":">=4.3.0 <5.0.0 ||

=5.10"} current: {"node":"5.4.1","npm":"3.3.4"}) npm WARN deprecated babel-preset-es2015@6.14.0: 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 enhanced-resolve@3.4.1: wanted: {"node":">=4.3.0 <5.0.0 || =5.10"} (current: {"node":"5.4.1","npm":"3.3.4"}) npm WARN engine loader-runner@2.3.0: 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};

Not sure if this would be any different, but have you tried the same configuration with a .babelrc file instead of in the loader config? — djfdev, Dec 22 '17 at 22:32
Have you tried adding `stage-0` in your `query` Object , You can find detailed answer here https://stackoverflow.com/questions/47613161/unexplained-syntax-error-react-jsx/47613371#47613371 — Aaqib, Dec 22 '17 at 22:33
@djfdev - yeah, I tried pulling the babel presets out into a babelrc.js file instead, but that didn't change anything. But is it supposed to be "babelrc.js" or "[filename].babelrc"? I tried the former - maybe I got that wrong. At any rate, it seems like it 'should' work in the loader config based on some of the examples I saw. — BioData41, Dec 22 '17 at 22:58
@Aaqib - Thanks for the suggestion. I just tried adding stage-0, but that didn't help. I don't think I should need that, anyway, since I'm not trying to do anything too advanced in my javascript. — BioData41, Dec 22 '17 at 23:09
It should be just `.babelrc` (dotfile) ... but agreed if your config isn't working that probably won't change things. — djfdev, Dec 22 '17 at 23:11

score 1 · Answer 1 · answered Dec 22 '17 at 23:21

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']
      }
    }
  ]
}

Problems getting webpack to call babel to transpile JSX in simple react.js setup.

1 Answers1