Javascript 未捕获错误：目标容器不是DOM元素。反应-业力-业力网页_Javascript_Reactjs_Babel Loader_Karma Webpack

Javascript 未捕获错误：目标容器不是DOM元素。反应-业力-业力网页

javascript reactjs

Javascript 未捕获错误：目标容器不是DOM元素。反应-业力-业力网页,javascript,reactjs,babel-loader,karma-webpack,Javascript,Reactjs,Babel Loader,Karma Webpack,我正在尝试将“因果报应者”应用到我们的React项目中。我正在使用karma webpack，babel loader来传输代码。在一些配置之后，我执行命令“karma start”，我得到了这个错误错误日志： Uncaught Error: Target container is not a DOM element. at Object.render (react-dom.development.js:24828) at Module../src/index.js (ind

我正在尝试将“因果报应者”应用到我们的React项目中。我正在使用karma webpack，babel loader来传输代码。在一些配置之后，我执行命令“karma start”，我得到了这个错误

错误日志：

 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:24828)
    at Module../src/index.js (index.js:12)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at absoluteindex.706055711.js:1

我提到了一些关于这个错误的主题，然后我把

标记放在

之前，但仍然得到了错误

这里是public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>ISFC</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!--ENV CONFIGURATION FILE-->
    <script src="%PUBLIC_URL%/env-config.js"></script>
  </body>
</html>

对这个问题有什么想法吗

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

import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import App from './App';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <Router basename="/ISF">
      <App />,
    </Router>
  </Provider>,
  document.getElementById('root')
);

// Karma configuration
// Generated on Mon May 17 2021 11:58:14 GMT+0700 (Indochina Time)
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
require('dotenv').config();
const webpack = require('webpack');

module.exports = (config) => {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'webpack', 'aChecker'],

    // list of files / patterns to load in the browser
    files: [{ pattern: './src/**/*.js', watched: false }],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './src/**/*.js': ['webpack'],
    },

    webpack: {
      devtool: 'inline-source-map',
      plugins: [
        new MiniCssExtractPlugin(),
        new webpack.DefinePlugin({
          // define some environment variable
        }),
      ],
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: path.resolve(__dirname, 'node_modules'),
            query: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: ['@babel/plugin-transform-runtime'],
            },
          },
          {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
          },
        ],
      },
    },

    webpackServer: {
      noInfo: true,
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'aChecker'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
  });
};