CODEWITHSUNDEEP
javascriptreactjsnpmwebpack
bkane56
bkane56

Reputation: 1679

ERROR in ./app/index.js on webpack -p

So I was informed last week I needed to learn react.js. My javascript is limited but what the heck.

I am trying the usual "Hello World" project to get a feel.

When I run webpack -p with the following index.js file it works fine:

index.js

var app = document.getElementById('app');
app.innerHTML = 'Hello World!'

but when I change my index.js to the following:

index.js

var React = require('react');
var ReactDOM = require('react-dom');

var HelloWorld = react.createClass({
    render: function() {
        return (
            <div>Hello World</div>
        )
    }
});

ReactDOM.render(
    <HelloWorld/>,
    document.getElementById('app')
)

I get the following error:

C:\Programming\reactFiles>npm run production

> [email protected] production C:\Programming\reactFiles
> webpack -p

Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 692ms
          Asset       Size  Chunks             Chunk Names
index_bundle.js  289 bytes       0  [emitted]  main
     index.html  315 bytes          [emitted]
   [0] multi main 28 bytes {0} [built] [1 error]
    + 1 hidden modules

ERROR in ./app/index.js
Module build failed: SyntaxError: C:/Programming/reactFiles/app/index.js: Unexpected token (7:12)
   5 |     render: function() {
   6 |         return (
>  7 |             <div>Hello World</div>
     |             ^
   8 |         )
   9 |     }
  10 | });
     at parser.pp //.......for about 30 lines.  I can add them if it helps

@ multi main
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

my package.json:

{
  "name": "reactfiles",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.9.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

I have seen other questions similar but found no answers that worked.

Any ideas?

Upvotes: 0

Views: 1485

Answers (1)

Ingwie Phoenix
Ingwie Phoenix

Reputation: 2983

Your babel-loader is missing the config.

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

And voila, it works. :)

Ref: https://github.com/babel/babel-loader#usage

Edit:

I just realized, I kinda threw this in without explaining: When specifying a loader, you do not need to write the full loader name. You can omit -loader from the name, Webpack will find it anyway!

Upvotes: 1

Related Questions