Javascript JS/Webpack:目标容器不是DOM元素_Javascript_Webpack_Babeljs

Javascript JS/Webpack:目标容器不是DOM元素

javascript webpack

Javascript JS/Webpack:目标容器不是DOM元素,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,我现在正在构建React JS应用程序，当我继续我的项目的“/”时，出现了以下错误： “未捕获错误：目标容器不是DOM元素。” 在我的项目中，我有一些组件和一些页面，当我运行带有“npm start”的服务器时，我无法访问我的主页我的应用程序是在没有网页包的情况下构建的，我在完成所有组件后添加了它。 webpack.config.js： const path = require('path'); module.exports = { devServer: { historyApiFallb

我现在正在构建React JS应用程序，当我继续我的项目的“/”时，出现了以下错误： “未捕获错误：目标容器不是DOM元素。”

在我的项目中，我有一些组件和一些页面，当我运行带有“npm start”的服务器时，我无法访问我的主页

我的应用程序是在没有网页包的情况下构建的，我在完成所有组件后添加了它。 webpack.config.js：

const path = require('path');
module.exports = {
devServer: {
  historyApiFallback: true
},
entry: './src/index.js',
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test:  /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader',
            ],
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader',
            ],
        }
    ]
}

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <title>React 101</title>
  </head>
  <body>
   <div id="app"></div>
   <script type="text/javascript" src="main.js"></script>
  </body>
</html>

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

import React from "react";
import ReactDom from "react-dom";

import App from "./App";

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

})

index.html：

const path = require('path');
module.exports = {
devServer: {
  historyApiFallback: true
},
entry: './src/index.js',
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test:  /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader',
            ],
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader',
            ],
        }
    ]
}

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <title>React 101</title>
  </head>
  <body>
   <div id="app"></div>
   <script type="text/javascript" src="main.js"></script>
  </body>
</html>

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

import React from "react";
import ReactDom from "react-dom";

import App from "./App";

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

main.js：

const path = require('path');
module.exports = {
devServer: {
  historyApiFallback: true
},
entry: './src/index.js',
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test:  /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader',
            ],
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader',
            ],
        }
    ]
}

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <title>React 101</title>
  </head>
  <body>
   <div id="app"></div>
   <script type="text/javascript" src="main.js"></script>
  </body>
</html>

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

import React from "react";
import ReactDom from "react-dom";

import App from "./App";

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

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
ReactDom.render（，document.getElementById（'app'））；

index.js：

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
导入“../src/assets/css/bootstrap/css/bootstrap theme.min.css”；
导入“../src/assets/css/bootstrap/css/bootstrap.min.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

document.getElementById（'root'）

将为

null

，因为在

index.html

中没有具有该ID的元素。我不知道你为什么在两个不同的文件中调用

ReactDOM.render

——如果你有一个完整的应用内置了React，你应该只在应用的入口点使用一次。（具有讽刺意味的是，它通常被称为

index.js

或

main.js

）是的，去掉

main.js

，并将

document.getElementById（'root'）

更改为

document.getElementById（'app'）

，在'index.js'中的确，通过用document.getElementById（'root'）替换document.getElementById（'app'），它可以工作！谢谢