webpack-ReferenceError：未定义文档

时间：2020-09-04 11:46:32

标签： javascript node.js webpack

tl; dr：Webpack无法编译，我不确定为什么在语法上一切都正确时，并且我也不完全理解此错误所隐含的含义。

尝试使用Webpack。全面披露：对此真的很新（一般是js /前端）。我终于解决了我遇到的其他错误（主要是指向错误的文件路径或语法错误）。我按照youtube视频进行了设置，事后看来这不是最好的主意，但我需要从某个地方开始学习，观看比阅读容易。无论如何，所以我遵循了这一点，并取得了进展。使用npm安装所有内容（请参见下面的package.json）并创建src / dist等。我不不使用React / Angular / Vue等，而只是普通的普通旧式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"
        })
    ]
};

这是我的文件夹结构的图像：

project structure

2 个答案:

答案 0 :(得分：1)

我刚刚解决了这个问题，但没有在 stackoverflow 上找到答案。 所以这里我是如何导致这个问题的： 在 webpack 中，在您的加载程序部分，如果您省略了规则的“测试”部分， 您可能会触发此错误。 问题是，webpack 会调用你的加载器 错误类型的文件，并给出这样的错误。

..
module: { 
  rules: [
    { 
      test: /\.ts$/, 
      use: 'ts-loader', exclude: /node_modules/ 
    },
  ] 
}
..

（我知道上述问题包含测试，但我的声誉太低，无法发表评论，我相信了解错误的根本原因与找出解决方法有关。我不喜欢无法解释的 '我做了事情，现在它起作用了！各种答案。）

答案 1 :(得分：0)

所以我不确定是否有人会犯同样的错误，但是以防万一，没有什么比搜索论坛并找到完全相同的错误而且没有人留下答案更糟糕的了。

我从一个友好的Redditor（大喊大叫r / learnjavascript）那里得到了帮助，基本上这只是一些语法错误，我不了解它是如何工作的。

在HtmlWebpackPlugin下，我不得不将文件名从.dist/index.html更改为index.html，并且必须在module.exports的{​​{1}}中添加以下代码要运行的webpack-dev-server：

webpack.config.js

从文档页面https://webpack.js.org/configuration/dev-server/#devserver中直接拉出。大概您可以选择自己喜欢的任何端口号。

另外，我必须更改导入一个js文件的方式，因为它是一个类（还有可能我应该更改它，但是当我到达它时，我会过桥）。它被称为 devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000 } ，所以我不得不使用Calendar.js来代替import * as Calendar from './Calendar'。

最后，在import Calendar from './Calendar'和src/index.html标签中分别留有css和style的标签，因此必须删除它们。

相关问题
最新问题