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
| ReactDOM.render( > <App />, | document.getElementById('app') | ); @ multi ./src/index.jsx main[0] i ｢wdm｣: Failed to compile. — pus
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

tmhao2005 tmhao2005 · Accepted Answer · 2020-07-27T03:23:59

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"
        ]
      },
    },
  },
]

Module parse failed: Unexpected token Reactjs?

1 Answers