RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 775681
Accepted
Raz Galstyan
Raz Galstyan
Asked:2020-01-26 01:17:36 +0000 UTC2020-01-26 01:17:36 +0000 UTC 2020-01-26 01:17:36 +0000 UTC

React Webpack 目标容器不是 DOM 元素

  • 772

webpack在项目上启动服务器时React,控制台出现错误

目标容器不是 DOM 元素。

一般来说,这意味着没有容器用于ReactDOM渲染组件。

但是我在这里给出的元素

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

它存在。

这是配置文件webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: "./src/main.jsx",
  output: {
    path: __dirname + '/public/build/',
    publicPath: "build/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!autoprefixer-loader",
        exclude: [/node_modules/, /public/]
      },
      {
        test: /\.gif$/,
        loader: "url-loader?limit=10000&mimetype=image/gif"
      },
      {
        test: /\.jpg$/,
        loader: "url-loader?limit=10000&mimetype=image/jpg"
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=10000&mimetype=image/png"
      },
      {
        test: /\.svg$/,
        loader: "url-loader?limit=26000&mimetype=image/svg+xml"
      },
      {
        test: /\.jsx$/,
        loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=react'],
        exclude: [/node_modules/, /public/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  }
}

这是一个文件package.json。

{
  "name": "less2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host 0.0.0.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.6",
    "json-loader": "^0.5.7",
    "postcss-loader": "^2.0.10",
    "react-hot-loader": "^3.1.3",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

我不明白我在配置中错过了什么?

reactjs
  • 4 4 个回答
  • 10 Views

4 个回答

  • Voted
  1. Best Answer
    Ilya Avdeenko
    2020-01-26T23:49:07Z2020-01-26T23:49:07Z

    检查您的 index.html 是否如下所示:

    <div id="content"></div>`
    <script src="bundle.js"></script>`
    
    • 4
  2. Daniel Khoroshko
    2020-01-26T15:52:57Z2020-01-26T15:52:57Z

    很可能您的 index.html 丢失了

    <div id='content'></div>
    
    • 3
  3. Vladimir Sirenko
    2022-03-22T20:46:55Z2022-03-22T20:46:55Z

    有同样的错误,指向 index.html 而不是div id=""like this div class=""。

    • 1
  4. Артём Воронцов
    2020-08-02T01:38:29Z2020-08-02T01:38:29Z

    也许react在页面完全加载之前开始渲染,当你连接脚本时,你需要在脚本中添加defer属性——它将允许脚本只有在页面完全加载后才能执行

    • 0

相关问题

  • 如何正确连接 React 到站点?

  • 为什么写成普通函数的组件会返回空

  • defaultProps 与 state 有何不同?

  • 如何在 Meteor+React 应用程序中连接和使用 Yandex.Metrica?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5