时间戳

首页 > 解决方案 > 获取 SyntaxError /app/src/index.js：ReactDOM.render 的意外令牌

node.js - 获取 SyntaxError /app/src/index.js：ReactDOM.render 的意外令牌

问题描述

从节点/反应应用程序获取以下错误

| ERROR in ./src/index.js
| Module build failed (from ./node_modules/babel-loader/lib/index.js):
| SyntaxError: /app/src/index.js: Unexpected token (8:2)
| 
|    6 | 
|    7 | ReactDOM.render(
| >  8 |   <>
|      |   ^
|    9 |     <CssBaseline />
|   10 |     <App/>
|   11 |   </>,

这是index.js文件

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';
import CssBaseline from '@material-ui/core/CssBaseline';

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

module.hot.accept();

下面是webpack.config文件

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[hash].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {loader: 'css-loader', options: {url: false}},
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
            },
          },
        ],
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: /images/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
            publicPath: '../fonts/',
          },
        }],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  plugins: [
    new Dotenv(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebPackPlugin({
      template: './public/index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    historyApiFallback: true,
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        // vendors chunk
        vendor: {
          chunks: 'all',
          test: /node_modules/,
        },
      },
    },
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        extractComments: true,
        test: /\.js(\?.*)?$/i,
        exclude: /\/node_modules/,
      }),
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          zindex: false,
        },
      }),
    ],
  },
};

有谁知道是什么导致了这个错误？

标签： node.jsreactjsreact-dom

解决方案

实际上我认为我只是通过在package.json名为文件的同一目录中添加另一个文件来修复.bablerc

内容.babelrc

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}

错误似乎消失了

推荐阅读