CODEWITHSUNDEEP
javascriptreactjswebpack
pus
pus

Reputation: 101

Module parse failed: Unexpected token Reactjs?

Module parse failed: Unexpected token Reactjs?

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

Upvotes: 2

Views: 5485

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

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

Upvotes: 1

Related Questions