CODEWITHSUNDEEP
reactjswebpackbabeljs
Tabbyofjudah
Tabbyofjudah

Reputation: 2133

What changed about webpack, babel, and React

I can no longer do a simplified webpack build, and I don't understand why...

app.js

var React = require("react");

class App extends React.Component {

    render() {
        return <div>Hello World</div>;
    }

}

React.render(<App />, document.body);

webpack.config.js

module.exports = {
    entry: "./app.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules)/,
                loader: 'babel'
            }
        ]
    }
};

run...

$ webpack

causes error...

ERROR in ./app.js
Module build failed: SyntaxError: /Users/alexbanks/Documents/code-play-2/eslint/app.js: Unexpected token (6:15)
  4 | 
  5 |     render() {
> 6 |         return <div>Hello World</div>;
    |                ^
  7 |     }
  8 | 
  9 | }
    at Parser.pp.raise (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/expression.js:510:12)
    at Parser.pp.parseExprSubscripts (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/expression.js:265:19)

???

This is something that used to build. I've tried using react-dom, I have babel-loader, babel-core, and react installed. I've tried several variations of the code includeing React.createComponent... everything gives me the same error. My project only has 3 files, app.js, webpack.config.js, and index.html.

Upvotes: 0

Views: 295

Answers (1)

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

If you did an npm update it is probably babel 6. Here are the changes for that.

  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-stage-0": "latest",

    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {presets:[ 'es2015', 'react', 'stage-0' ]}
      },

Upvotes: 3

Related Questions