模块解析失败：意外的令牌 Reactjs？

Question

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

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