时间戳

首页 > 解决方案 > JS/Webpack：目标容器不是 DOM 元素

javascript - JS/Webpack：目标容器不是 DOM 元素

问题描述

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

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

我的应用是在没有 webpack 的情况下构建的，我在所有组件完成后添加了它。 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',
            ],
        }
    ]
}

};

索引.html：

<!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>

.babelrc：

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

主.js：

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

import App from "./App";

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

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../src/assets/css/bootstrap/css/bootstrap-theme.min.css';
import '../src/assets/css/bootstrap/css/bootstrap.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
   <App />
  </React.StrictMode>,
 document.getElementById('root')
 );
serviceWorker.unregister();

标签： javascriptwebpackbabeljs

解决方案

推荐阅读