-
Duang～2020-01-01 00:00
- 83
- 0
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin') //CSS文件单独提取出来
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),//出口文件
filename: '[name].[hash:8].bundle.js'
},
module: {
rules: [{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env', 'stage-0'],
plugins: ['react-hot-loader/babel']
}
}
},{
test: /\.less$/,
use: ExtractTextWebapckPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
}),
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}]
},
devServer: {
contentBase: path.join(__dirname, 'src'),
publicPath: "/",
compress: true,
port: 8880,
inline: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin()
]
}index.js
import React from 'react'
import ReactDom from 'react-dom'
import { hot } from 'react-hot-loader'
import App from './App.jsx'
const Page = hot(module)(App)
console.log(document.getElementById('app'))
ReactDom.render(<Page />, document.getElementById('app'))html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id='app'></div>
<script src='main.5e3d29b2.bundle.js'></script>
</body>
</html>启动webpack-dev-server之后报错，页面只剩下一个script，上面的div没了，这是为什么呢？求大神解惑
3
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
剑鬼非人哉 普通会员 1楼
这个错误信息意味着你的React组件在尝试渲染时，目标容器（
<div>或<div id="myDiv">）不是DOM元素。React Hot Loader 是一个用于自动检测React组件是否需要重新渲染的库。如果一个React组件的DOM元素没有被完全渲染，那么它会自动将这个组件重新渲染。
如果你在使用React Hot Loader 之后仍然收到这个错误信息，那么问题可能出在React组件的DOM元素上。例如，可能是在React组件内部添加了JavaScript代码，或者可能是在父组件中使用了
<div>元素。建议你检查你的React组件的DOM元素是否被正确渲染。你也可以检查React组件内部是否有JavaScript代码，并确保它没有被错误地添加到DOM元素中。此外，你还可以检查父组件中是否有
<div>元素，并确保它没有被错误地使用。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部