Module parse failed: Unexpected token Reactjs?

Question

ERROR in ./src/index.js 6:4 Module parse failed: Unexpected token (6:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | ReactDOM.render(

<App />,

| document.getElementById('app') | );

@ multi ./src/index.js main[0] i ｢wdm｣: Failed to compile.

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

webpack.config.js

module.exports = {
    entry: [
        './src/index.jsx'
    ],
    output:{
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module:{
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' },
        ]
    }
}

ERROR in ./src/index.jsx 6:4 Module parse failed: Unexpected token (6:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders — pus
– pus, Commented Jul 27, 2020 at 3:12
| ReactDOM.render( > <App />, | document.getElementById('app') | ); @ multi ./src/index.jsx main[0] i ｢wdm｣: Failed to compile. — pus
– pus, Commented Jul 27, 2020 at 3:12
module.exports = { entry: [ './src/index.jsx' ], output:{ path: __dirname, filename: 'app/js/main.js' }, module:{ rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' }, ] } } — pus
– pus, Commented Jul 27, 2020 at 3:16

tmhao2005 · Accepted Answer · 2020-07-27 04:13:29Z

1

The message is quite clear that you haven't setup the loader to transpile your jsx file yet. Your config file doesn't cover for jsx? file but you did for ts file. The solution is just either add babel + babel-loader to your project or switch file to ts format would resolve your issue.

Here is the basic steps if you go for babel anyway:

Install packages needed:

npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader

Add babel loader to webpack config:

rules: [
  {
    test: /\.(js|jsx)$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          "@babel/env",
          "@babel/react"
        ]
      },
    },
  },
]

edited Jul 27, 2020 at 4:13

answered Jul 27, 2020 at 3:23

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

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

15 Comments

pus Over a year ago

ERROR in ./src/index.jsx Module build failed (from ./node_modules/babel-loader/index.js): TypeError: Cannot read property 'babel' of undefined at Object.module.exports (G:\new-react\reactquiz\node_modules\babel-loader\index.js:40:36) @ multi ./src/index.jsx main[0] ERROR in (webpack)-dev-server/client?localhost:8080 Module build failed (from ./node_modules/babel-loader/index.js): TypeError: Cannot read property 'babel' of undefined at Object.module.exports (G:\new-react\reactquiz\node_modules\babel-loader\index.js:40:36)

pus Over a year ago

@ multi (webpack)-dev-server/client?localhost:8080 ./src/index.jsx main[0] i ｢wdm｣: Failed to compile.

tmhao2005 Over a year ago

seems I missed babel-cli I edited the answer again. Please check it out

pus Over a year ago

[./src/index.jsx] 239 bytes {main} [built] [failed] [1 error] [C:\Users\user\AppData\Roaming\npm\node_modules\webpack-dev-server\client\index.js?localhost:8080] (webpack)-dev-server/client?localhost:8080 239 bytes {main} [built] [failed] [1 error]

pus Over a year ago

ERROR in ./src/index.jsx Module build failed (from ./node_modules/babel-loader/index.js): TypeError: Cannot read property 'babel' of undefined at Object.module.exports (G:\new-react\reactquiz\node_modules\babel-loader\index.js:40:36) @ multi ./src/index.jsx main[0]

|

Collectives™ on Stack Overflow

Module parse failed: Unexpected token Reactjs?

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related