Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

Question

Update:

Code pushed to https://github.com/gsouvik/react_spa_experiment

Initial Post:

I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js.

What I did

I was following this video tutorial line by line: React & Webpack 4 from scratch

My package.json

{
  "name": "my_react_experiment_2",
  "version": "1.0.0",
  "description": "Basic react with webpack ",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --hot",
    "build": "webpack --mode production"
  },
  "author": "Souvik Ghosh",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

My webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.export = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/build'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/templates/index.html'
    })
  ]
};

My .babelrc

{
  "presets": ["env", "react"]
}

My directory structure

Expected behaviour

I fire up the dev server npm run dev. Expected to see my shiny new React js page saying "My first React Webpack project" (from the component /components/App.js)

Actual Behavior

ERROR in ./src/index.js 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. | import App from "./components/App"; | ReactDOM.render(, document.getElementById('root')); | //ReactDOM.render('Hello User ', document.getElementById('root')); @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main2

If required I can share the codebase via a git repo. Any help is greatly appreciated.

You can view my webpack config if you want to update. github.com/meetzaveri/react-doughnut/blob/master/… — Meet Zaveri
– Meet Zaveri, Commented Aug 25, 2018 at 8:32
Perhaps you need resolve: { modules: [ path.resolve("./src"), path.resolve("./node_modules") ], extensions: [".js"] } — Hemadri Dasari
– Hemadri Dasari, Commented Aug 25, 2018 at 8:32
@MeetZaveri I've updated the original post with the git repo. Thanks. — Souvik Ghosh
– Souvik Ghosh, Commented Aug 25, 2018 at 14:10

Hemadri Dasari · Accepted Answer · 2018-08-25 15:04:01Z

3

The issue is with typo in your webpack config file.

You have module.export which is not correct. It should be module.exports

Working example

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/build'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/templates/index.html'
    })
  ]
};

edited Aug 25, 2018 at 15:04

answered Aug 25, 2018 at 8:37

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

3 Comments

Souvik Ghosh Over a year ago

Thank you for taking time and answering. I changed my webpack config to match the one given in your answer but unfortunately it did not fix the issue. I've updated the original post with a git repo. You may clone it on your local and try it to see if it runs successfully. npm install and then npm run dev. Thanks again for your help.

Souvik Ghosh Over a year ago

Amazing, that fixed my issue. How could I miss that. Thanks a lot.

Hemadri Dasari Over a year ago

Even I missed to find that. NP :) Kindly accept and upvote my answer if it helps you resolve your issue.

Collectives™ on Stack Overflow

Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related