React|Webpack4|Babel7 Module build failed

Question

I am trying to setup a react project with webapck4 and babel7 and I am getting the below error.

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ritesh/myprojects/testproj/reduxspa/js/jsapp/src/index.js: Unexpected token (7:2)

   5 | 
   6 | ReactDOM.render(
>  7 |   <div>{title}</div>,
     |   ^
   8 |   document.getElementById('app')
   9 | );
  10 | 
    at Parser.raise (/home/ritesh/myprojects/testproj/reduxspa/js/jsapp/node_modules/@babel/parser/lib/index.js:3939:15)

Below are my setup and file details and jsapp is my rootfolder.

My operating system is Ubuntu16.

dist/index.html

<!DOCTYPE html>
<html>
<head>
    <title>test html</title>
</head>
<body>
    <div id='app'></div>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
);

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        //use: ['babel-loader']
        loader:"babel-loader",
      },
    ]
  },

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
};

.babelsrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

package.json

{
  "name": "jsapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

I am not sure what I am doing wrong. I tried to check the different answers also in stackoverflow. But I am still not able to resolve this issue.

pajahuh · Accepted Answer · 2018-09-26 18:12:49Z

2

probably just a typo but

.babelsrc should be .babelrc

answered Sep 26, 2018 at 18:12

pajahuh

361 bronze badge

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

4 Comments

Ritesh Choudhary Over a year ago

Thank you @pajahuh for quick turn around. This really was the issue. It is fixed.

Ritesh Choudhary Over a year ago

@Think-Twice sorry my mistake, I did that now.

Ritesh Choudhary Over a year ago

@Think-Twice I upvoted but its is saying that vote casted by user less than 15 reputaion is only recorded not displayed publicly.

Hemadri Dasari Over a year ago

Oh my bad didn’t notice your score.

Ritesh Choudhary · Accepted Answer · 2018-09-26 18:11:29Z

0

Hello I found the solution. Actually I have a typo in naming .babelrc file, by mistake I have named it .babelsrc

answered Sep 26, 2018 at 18:11

Ritesh Choudhary

414 bronze badges

Collectives™ on Stack Overflow

React|Webpack4|Babel7 Module build failed

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related