Babel-loader: ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

[mowais-ac]

I configured babel + webpack + eslint in my existing project, after configuration I am getting an error at the time to run the npm run buildDev command from terminal, I'm struggling a lot to find the solutions of this weired error, please help

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: [projectfolder]/src/index.js: Unexpected token (24:16) 22 | } 23 | > 24 | ReactDOM.render(, document.getElementById('root'));

package.json

{
  "name": "project1",
  "main": "src/index.js",
  "dependencies": {
    "autoprefixer": "7.1.6",
    "axios": "^0.18.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^9.0.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-standard": "^4.0.0",
    "express": "^4.16.4",
    "polyfill": "^0.1.0",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react": "^16.8.5",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "tapable": "^1.1.3",
    "video-react": "^0.13.0",
    "yarn": "^1.13.0"
  },
  "scripts": {
    "test": "jest",
    "coverage": "jest --coverage",
    "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
    "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
    "start": "node ./dist/server.js"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@webpack-cli/init": "^0.1.5",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.1.0",
    "eslint": "^5.16.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "image-webpack-loader": "^4.6.0",
    "jest": "^20.0.4",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^0.6.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.24.4",
    "webpack-node-externals": "^1.7.2"
  }
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: {
        server: './server.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js'
    },
    target: 'node',
    node: {
        // Need this when working with express, otherwise the build fails
        __dirname: false,   // if you don't put this is, __dirname
        __filename: false,  // and __filename return blank or /
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets:['es2015','react']
                    }
                }],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.script\.js$/,
                use: [
                    {
                        loader: 'script-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ]
            },
            {
                // Loads the javacript into html template provided.
                // Entry point is set below in HtmlWebPackPlugin in Plugins
                test: /\.html$/,
                use: [{loader: "html-loader"}]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: './images',
                            name: "[name].[ext]",
                        },
                    },
                ]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                }
            }
        ]
    },
    resolve: {
        extensions: [ '.js', '.jsx', '.css', '.web.js', '.mjs', '.json', '.web.jsx'],
        modules: [
            "node_modules"
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./index.html",
            excludeChunks: [ 'server' ]
        }),
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new webpack.NamedModulesPlugin()
    ],
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    }
}

[loganfsmyth]

Do you have a Babel configuration file with preset-react enabled?

[nicolo-ribaudo]

I don't know if it is the cause of the error message, but you are mixing Babel 6 packages with Babel 7 packages. You should update everything to v7.

[mowais-ac]

@loganfsmyth I was missing @babel/preset-react in .babelrc file

My final .babelrc file looks like.

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

Thank you so much

[Number77asa]

Not

options: {
presets: ['react']
}
but

options: {
presets: ['@babel/preset-react']
}

[aaliashraf]

I also have similar problem but resolve by adding in .babelrc as following
{ "presets": [ ["@babel/preset-env",{ "targets":{ "node":"current" } }], "@babel/preset-react" ] }

[sharunspi]

Add this in package.json

  "babel": {
    "presets": [
      "babel-preset-react-app"
    ]
  }

[TresTres]

I've also had this happen with a setup that was previously working correctly. If the node process hangs and a change causes webpack to reload, this can also happen. After making sure the node server was dead and ran npm start again, everything loaded as expected. It seems pretty likely to happen to people who use Node on WSL 🤷‍♂️