webpack-ReferenceError：文档未定义
2020-09-04
21689
tl;dr：Webpack 无法编译，我不确定为什么，因为一切看起来语法正确，而且我也不完全理解这个错误意味着什么。
尝试使用 webpack。完整披露：对此真的很陌生（一般是 js/前端）。我终于解决了我遇到的其他错误（主要是指向错误的文件路径或语法错误）。我按照 YouTube 视频进行了设置，事后看来这可能不是最好的主意，但我需要从某个地方开始，观看比阅读更容易。无论如何，所以我按照那个视频开始动起来。使用 npm 安装了所有内容（请参阅下面的
package.json
）并创建了 src/dist 等等。我
没有
使用 React/Angular/Vue 等，只是普通的老式 vanilla javascript。而且我在 Linux 上，如果这有任何区别的话（我想没有）。
然后我遇到了这个错误：
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/alan/dev/privateFolder/shrektime
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 91bf4b6307b254c69adc
Version: webpack 4.44.1
Time: 1110ms
Built at: 04/09/2020 04:20:38
Asset Size Chunks Chunk Names
.dist/index.html 1.39 KiB [emitted]
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
bundle.js 374 KiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/js/components/Calendar.js] 1.18 KiB {main} [built]
[./src/js/components/Input.js] 171 bytes {main} [built]
[./src/js/components/Results.js] 603 bytes {main} [built]
[./src/js/handlers/base.js] 356 bytes {main} [built]
[./src/main.js] 2.7 KiB {main} [built]
+ 23 hidden modules
ERROR in Error: /home/alan/dev/privateFolder/shrektime/node_modules/style-loader/dist/runtime/injectStylesIntoSty leTag.js?:93
var style = document.createElement('style');
^
ReferenceError: document is not defined
- injectStylesIntoStyleTag.js?:93 insertStyleElement
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15
- injectStylesIntoStyleTag.js?:208 addStyle
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13
- injectStylesIntoStyleTag.js?:81 modulesToDom
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18
- injectStylesIntoStyleTag.js?:239 module.exports
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25
- style.css?:15 eval
/home/alan/dev/privateFolder/shrektime/src/style.css?:15:14
- index.html:240 Object../src/style.css
/home/alan/dev/privateFolder/shrektime/src/index.html:240:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
- loader.js:3 eval
[index.html?.]/[html-webpack-plugin]/lib/loader.js:3:34
- index.html:133 Object../node_modules/html-webpack-plugin/lib/loader.js!./src /index.html
/home/alan/dev/privateFolder/shrektime/src/index.html:133:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 5.29 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 4.34 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js] 6.64 KiB {HtmlWebpackPlugin_0} [built]
[./src/img/icons8-shrek-256.png] 80 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Calendar.js] 1.18 KiB {HtmlWebpackPlugin_0} [built]
[./src/js/components/Input.js] 171 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Results.js] 603 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/base.js] 356 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/dateHandler.js] 1.97 KiB {HtmlWebpackPlugin_0} [built]
[./src/main.js] 2.7 KiB {HtmlWebpackPlugin_0} [built]
[./src/style.css] 519 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.
这是我的
package.json
{
"name": "shrektime",
"version": "1.0.0",
"description": "A stupid idea gone too far",
"main": "main.js",
"type": "module",
"dependencies": {
"fractional": "^1.0.0",
"lodash": "^4.17.20",
"moment": "^2.27.0"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"compile:sass": "node-sass src/sass/main.scss src/style.css -w",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode-development --open"
},
"author": "Alan Nardo",
"license": "ISC"
}
在我的
main.js
文件夹中，我导入了 CSS 和 Sass，如下所示：
import sass from './sass/main.scss';
import css from './style.css';
最后是我的
webpack.config.js
文件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{ loader: "file-loader" }
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: ".dist/index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
这是我的文件夹结构的图像：
3个回答
我刚刚遇到并解决了这个问题，但在 stackoverflow 上找不到答案。 下面是我导致这个问题的原因： 在 webpack 中，在您的加载程序部分中，如果您省略规则的“测试”部分， 则可能会触发此错误。 问题是，webpack 将在错误类型的文件上调用您的加载程序，并给出类似这样的错误。
..
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader', exclude: /node_modules/
},
]
}
..
（我知道上述问题包含测试，但我的声誉太低，无法发表评论，我相信了解错误的根本原因与找出如何解决它们有关。我不喜欢无法解释的“我做了某件事，现在它起作用了！”之类的答案。）
jakob gaardsted
2021-01-08
所以我不确定其他人是否会遇到完全相同的错误，但以防万一，没有什么比搜索论坛并找到完全相同的错误而没有人留下答案更糟糕的了。
我得到了一位友好的 reddit 用户（r/learnjavascript 大喊）的帮助，基本上只是这里和那里的一些语法错误，而我不明白事情是如何工作的。
在
HtmlWebpackPlugin
下，我必须将文件名从
.dist/index.html
更改为
index.html
，并且必须在
webpack.config.js
的
module.exports
中添加以下代码，以便 webpack-dev-server 运行：
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
直接从文档页面 https://webpack.js.org/configuration/dev-server/#devserver 。大概您可以选择任何您喜欢的端口号。
此外，我必须更改导入我的一个 js 文件的方式，因为它是一个类（说实话，我应该更改它，但我会在遇到它时解决这个问题）。它被称为
Calendar.js
，所以我必须使用
import Calendar from './Calendar'
，而不是执行
import * as Calendar from './Calendar'
。
最后，在我的
src/index.html
中，我分别保留了 css 和
main.js
的
style
和
script
标签，所以我不得不删除它们。
nos codemos
2020-09-05
如果您直接访问“document”，则可能会发生此错误，您需要使用 useEffect 或 useState 来设置此值。
rocky handsome
2024-06-03