nodejs reactjs and webpack, config is wrong but what?

Question

I know there are a bunch of resources out there describing the setup and I have tried several approaches, but it seams that things are changing so fast that the examples I google have become obsolete - here goes

package.json
{
  "name": "scoreboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9"
  }
}

this is my webpack.config.js

module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",
    output: {
        filename: "main.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
            query: {
                presets: ["react", "es2015"]
            }
        }
        ]
    }
}

directory structure

app
- greeting.js
- main.js
dist
node_module
package.json
webpack.config.js

content of greeting.js

import React from "react";

export default React.createClass({
    render: function () {
        return (
            <div className="greeting">
                Hello {this.props.name}!
            </div>
        );
    },
});

content of main.js

import React from "react";
import Greeting from "./greeting";

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

but when I run

$ webpack Hash: 553345561044745134b3 Version: webpack 1.12.9 Time: 2573ms
    + 1 hidden modules

ERROR in ./main.js Module build failed: SyntaxError: /Users/kristiannissen/Documents/js/scoreboard/app/main.js: Unexpected token (5:8)   3     4 React.render(
> 5        <Greeting/>,
           ^   6         document.body   7 );   8

from what I can tell the <Greeting/> is not being rendered as expected. To install it all I ran npm install --save react react-dom babelify babel-preset-react --save-dev

Update Added the query to the webpack.config.js but when running webpack I now get this

$ webpack
.../scoreboard/node_modules/webpack-core/lib/LoadersList.js:54
        if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");

Still not quit twerking the way I am hoping

Update After changing the webpack.config.js to

module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",
    output: {
        filename: "main.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ["react", "es2015"]
            }
        }
        ]
    }
}

and installing the mentioned module, it's twerking! There was a typo in my greeting file, the return function should not use {} but ()

Full package.json

{
  "name": "scoreboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9"
  }
}

did you try using wepack's loader attribute instead of loaders? — enjoylife
– enjoylife, Commented Dec 10, 2015 at 23:00

dsan · Accepted Answer · 2015-12-10 23:07:23Z

3

You need to add the babel-preset-react you installed to the webpack config. You might also need to change the 'loaders' property to just 'loader' and add the 'es2015' preset to the query array since you also have that installed.

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

edited Dec 10, 2015 at 23:07

answered Dec 10, 2015 at 21:03

dsan

1,58912 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dsan Over a year ago

@kristiannissen I updated my answer base on your results trying it.

NamelessDeveloper · Accepted Answer · 2015-12-10 23:07:44Z

The first problem you were having was caused by Babel not being able to parse and transform JSX syntax.

Installing babel-preset-react solves this, and the way you are configuring Babel via the query object is valid.

However when using query : { } you must define a loader(singular) instead of an array of loaders(plural). This is what the last error message is telling you.

Substituting loaders: ["babel-loader"] with loader: "babel-loader" should fix your problem.

Collectives™ on Stack Overflow

nodejs reactjs and webpack, config is wrong but what?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related