CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmwebpack
Shivam Singh
Shivam Singh

Reputation: 31

Webpack/Babel installation for ReactJS

I just started learning ReactJS and came across something called as webpack which is basically a module bundler.

Somehow,I'm stuck with the configuration of the same and the following error keeps coming.

ERROR in ./src/index.js 7:16

Module parse failed: Unexpected token (7:16)

You may need an appropriate loader to handle this file type.

render()
{
    return (<div> <h1> Hi </h1> </div>);
}

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! [email protected] start: webpack --mode=development ./src/index.js -o bundle.js

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the [email protected] start script.

Here is my Package.json

    {
  "name": "reactsetup",
  "version": "1.0.0",
  "main": "./src/index.js",
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "bundle-loader": "^0.5.6",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.12.0",
    "webpack-dev-server": "^3.1.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode=development ./src/index.js -o bundle.js",
    "build": "webpack -d && cp index.html dist/index.html &&  webpack-dev-server --content-base src/ --inline --hot",
    "dev-start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

index.js

import React from "react"
import {render} from "react-dom"      

class App extends React.Component {
    render()
    {
        return (<div> <h1> Hi </h1> </div>);

    }

}

render(<App/>, window.document.getElementById("app"));

web.config.js

var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
    entry: SRC_DIR + "index.js",
    output: {
        path: DIST_DIR,
        filename: "bundle.js"
    },
    module: {
        rules: [ {
            test: /\.js?/,

            use: {
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["react", "es2015"]
                }
            }
        }
        ]
    }
};

    module.exports = config

And lastly, index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<script src="bundle.js"></script>
</body>
</html>

PS: This is my first question ever on stackoverflow. Apologies for the flaws,if any.

Upvotes: 1

Views: 631

Answers (3)

Anditthas
Anditthas

Reputation: 541

It seems there are a couple of things

  1. rename web.config.js to webpack.config.js
  2. install babel-preset-react
  3. change your HTML to the following

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>

webpack.config.js 

var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
  entry: SRC_DIR + '/index.js',
  output: {
    path: DIST_DIR,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js?/,
        exclude: /node_modules/,

        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', 'es2015'],
          },
        },
      },
    ],
  },
};

module.exports = config;

One tip, use create react app to start fast with react :)

Upvotes: 1

Kavindu Wijesuriya
Kavindu Wijesuriya

Reputation: 157

The easiest way for a beginner to set-up the React environment is to use create-react-app.

I'm assuming that you already have node installed. If not a quick Google search will instruct you how to install nodejs.

After that run the following command in the directory where you want to create the project

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

Then open your browser and go to localhost:3000 and you should see your react template.

More information on create-react-app can be found via the following links

github page

react official documentation

Upvotes: 0

Yozi
Yozi

Reputation: 12755

the default name for config is "webpack.config.js", not the "web.config.js". And you don't pass the "--config" property either. So it looks like your webpack config is not used at all.

I believe, renaming config to the "webpack.config.js" could help you

Upvotes: 0

Related Questions