WebPack 4错误‘文档未定义’
Webpack是一个现代的静态模块打包工具，它主要用于将多个模块打包成一个或多个bundle文件，以便在浏览器中加载。它是前端开发中常用的工具之一，可以帮助开发者优化代码、提高性能，并且支持各种前端开发框架。
关于WebPack 4错误'文档未定义'，这个错误通常是由于在代码中使用了未定义的变量或对象导致的。具体来说，当代码中使用了document对象，但在当前作用域中未定义document时，就会抛出这个错误。
解决这个错误的方法有以下几种：
- 确保代码在浏览器环境中运行：Webpack通常用于前端开发，因此代码需要在浏览器环境中运行。如果你在Node.js环境中运行代码，就会出现'文档未定义'的错误。确保你的代码在浏览器环境中运行，或者使用Node.js的模拟环境（如jsdom）来模拟浏览器环境。
- 检查代码中是否存在未定义的变量或对象：仔细检查代码中是否存在未定义的变量或对象。特别是在使用document对象或其他浏览器全局对象时，要确保它们在当前作用域中已经定义。
- 确保正确引入Webpack打包后的文件：如果你使用Webpack将多个模块打包成一个bundle文件，确保在HTML文件中正确引入了打包后的文件。可以通过检查HTML文件中的script标签来确认引入路径是否正确。
- 检查Webpack配置文件：如果以上方法都没有解决问题，可以检查Webpack的配置文件是否正确。特别是检查entry和output配置项是否正确设置，确保打包后的文件能够正确输出。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云Webpack产品介绍：https://cloud.tencent.com/product/webpack
相关·内容
我正在尝试从parcel切换到Webpack (4.42.1)，但当我执行npm start或npm run build时出现错误 "ReferenceError:未定义文档“ 我已经从我的项目中剪切了一个演示应用程序，其webpack.config.js与演示应用程序位于此处的webpack.config.js完全相同：https://github.com/vbogretsov/webpack-please-help 附言:globalObject的诀窍：“这个”没有用。 最初的错误是localStorage未定义，当我尝试使用window.localStorage时，错误是“窗口
浏览 7提问于2020-03-26得票数 0
我已经在Symfony 4中安装了一个VueJs项目，但是当我遇到与等待和异步(未定义的ReferenceError: regeneratorRuntime未定义)的错误时，我感到意外。
我为webpack找到了很多信息，却找不到webpack安可。
webpack的webpack.config.js配置是什么(Symfony 4)？
浏览 1提问于2018-04-27得票数 2
回答已采纳
我是Webpack和Babel的新手。
例如，我创建了一个JS类：
export default class Log4js {
#current_appender;
}
当我试图在Firefox浏览器控制台中创建类的js变量时，我得到了以下错误：
ReferenceError: Log4js未定义.<.>
这是我的webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
//Web
浏览 2提问于2020-07-17得票数 0
回答已采纳
如何将我的dll.bundle.js注入index.html文件？
在铬控制台中，它抛出一个错误：
未定义的webpack_require(...) ReferenceError：and未定义TypeError: TypeError不是函数错误。
这是因为我的Dll没有注入到index.html文件
我不想使用express或节点服务器来承载我的静态文件。我只想使用webpack-dev-server。我怎样才能用Dll包做到这一点呢？
浏览 2提问于2016-10-27得票数 2
1回答
我有webpack.config.js文件：
'use strict';
var webpack = require('webpack')
var env = process.env.NODE_ENV
var API_URL_1 = {
production: JSON.stringify('http://xyz:8000/api/v1/var'),
development: JSON.stringify('http://192.168.99.102/api/v1/var')
};
var API_URL_
浏览 5提问于2017-11-03得票数 1
当我试图为我的社交媒体web应用上的用户设置评论系统的时间戳时，我得到了错误： “未定义: firebase__WEBPACK_IMPORTED_MODULE_4__"default".firestore.FieldValue.serverTimeStamp不是函数。(在'firebase__WEBPACK_IMPORTED_MODULE_4__"default".firestore.FieldValue.serverTimeStamp()'，'firebase__WEBPACK_IMPORTED_MODULE_4__"defa
浏览 37提问于2021-07-18得票数 0
回答已采纳
我觉得网上应该有个直截了当的例子。不幸的是，我没能找到一个。简而言之，我是通过纱进口Bootstrap 4的。Bootstrap 4的依赖项之一是jQuery。这两个依赖项将在我的应用程序中的所有页面上使用。出于这个原因，我想通过Webpack把它们捆绑在一起。目前，我有以下几点：
app.js
// Import jQuery
const $ = require('jquery');
// Import Bootstrap
require('bootstrap/dist/css/bootstrap.min.css');
然后，在我的webpack.confi
浏览 0提问于2017-10-12得票数 3
我使用webpack 4作为js，bundling.jquery是在files.But内工作，而不是在html file.It中工作，如下所示
未定义的ReferenceError：$未定义
webpack.config.js
plugins: [
new ExtractTextPlugin({filename:'css/app.bundle.css'}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jq
浏览 0提问于2018-10-25得票数 1
在控制台未指定的ReferenceError中获取错误:在将webpack 4升级到webpack 5之后未定义参数。此参数正在退出功能。
浏览 2提问于2021-10-06得票数 1
8回答
我使用的圆点网核心与角4和webpack配置。
当我试图在组件或服务中获取窗口或文档时，我会得到以下错误：
ReferenceError:文档未定义
ReferenceError:未定义窗口
以下是我所犯的错误：
Microsoft.AspNetCore.NodeServices[0]
ERROR { ReferenceError: window is not defined
at _window (C:\gitRepose\AngularCore\FM\FMWebApp\FootballWebApp\ClientApp\dist\main-serv
浏览 3提问于2017-09-21得票数 16
MQTT插件：我使用
npm安装mqtt -保存
而且，我还做了下面的Browserify
1.npm安装-g浏览器//安装浏览器2.cd节点_模块/mqtt 3.npm安装。//安装开发依赖项4.在客户端应用程序中浏览mqtt.js -s mqtt > browserMqtt.js // require mqtt
Webpack
1.npm安装-g webpack //安装webpack 2.cd节点_模块/mqtt 3.npm安装。// install依赖项4.webpack mqtt.js ./browserMqtt.js -输出-库mqtt
我在我的.ht
浏览 5提问于2018-01-15得票数 0
回答已采纳
我正在使用webpack-热中间件方法，在安装之后，我得到了u not：$RefreshSig$未定义在控制台中抛出的错误。
webpack.config.js看起来是这样的：
模块：
{
test: 'ts',
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
plugins: [buildMode === '
浏览 8提问于2022-01-22得票数 1
2回答
React引导元素没有样式。
、、、、
我正在使用react.js和react.js路由器和webpack开发一个网络应用程序。我想使用react引导来进行样式化，但是我的导航条看起来不像这里所示的。
这是我的反应引导码
<Navbar inverse fixedTop>
<Navbar.Collapse>
<Nav bsStyle="pills">
<NavItem href="#"><Link to="/">{this.
浏览 6提问于2016-01-30得票数 8
回答已采纳
我想使用tween.js动画一个变化的数字(这是我从计算机道具传递的)
我完成了这个示例中所描述的内容： (它使用了官方文档()中的示例)。
我添加的唯一代码是在我的组件“<script>”中开始的AnimatedCounter之后的直线。
var TWEEN = require('@tweenjs/tween.js');
但我明白这个错误。
未定义的TypeError:无法读取未定义的属性“toFixed”
在TWEEN.Tween.eval
在TWEEN.Tween.update (webpack-内部://1156:390)
在_Group.update
浏览 0提问于2018-02-26得票数 0
回答已采纳
1回答
我最近参与了一个使用了Webpack捆绑器的项目。在重构代码时，我注意到绑定程序在使用未定义的函数时不会抛出错误。 import { foo } from './foo.js';
foo('hi');
baz('test'); 在这里，baz没有被导入和定义，我的期望是捆绑程序会在baz上抛出错误作为未定义，但它没有。 最好在编译时而不是在运行时识别这些情况。
浏览 28提问于2019-09-01得票数 0
回答已采纳
我正在执行角项目的单元测试，但是我得到了错误。
“未捕获的ReferenceError:区域未定义”
在茉莉花和卡玛。目前我使用的是角度6。
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-
浏览 0提问于2019-08-27得票数 4
1回答
我和webpack一起使用，但是页面总是显示如下：
未明错误:定义不能间接使用
此外，我还尝试在我的module.noParses中添加webpack.config.js配置，如下所示：
noParse: /jimp/
但它将解决其他错误：
未定义未定义的ReferenceError:要求
只是如此的迷茫，没有真正的问题在哪里，也许jimp不是和webpack不相容吗？
谢谢你的进阶。
浏览 4提问于2016-02-20得票数 0
当试图导入"Interval“时，我得到了错误”无法读取未定义的属性‘调用’“
我的进口产品是：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import '
浏览 1提问于2018-01-17得票数 2
回答已采纳
当Webpack编译包含以下HTML的应用程序时，它会抱怨theme变量未定义。
这是我的index.html文件：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
</head>
<body th:class="${theme}">
<div id="root">&
浏览 2提问于2017-09-04得票数 2
回答已采纳
我试图在我的Webpacked项目中使用JQuery插件<code>C0</code>，但每次我尝试调用它时，它都会给我一个<code>D1</code>错误，并且实际的句柄是未定义的。
我注意到webpack没有包含该模块，因此我在顶部为其添加了一个导入。
<code>A2</code>
HTML：
<code>A3</code>
Webpack配置：
<code>A4</code>
Webpack输出：
<code>A5</code>
我使用的版本
浏览 17提问于2020-11-13得票数 0
回答已采纳
2回答
我是一个初学者，开发与Nodejs和反应。
现在，我已经得到了我的web应用程序的第一个版本，它在开发环境中正常工作，但是我试图为生产环境构建一个版本，但我遇到了这个错误
ReferenceError:文档未定义
我的package.json的脚本是：
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev":
浏览 0提问于2019-08-08得票数 4
回答已采纳
我想用空字符串替换/\r?\n|\r/g，但得到一个类型错误“无法读取未定义的属性' replace‘”。 export function getCupsCredentials() {
var vcap_services = process.env.VCAP_SERVICES;
var vcap_servces_as_single_line = vcap_services.replace(/\r?\n|\r/g, " ");
var vcap_servces_as_json = JSON.parse(vcap_servces_as_single
浏览 72提问于2020-10-30得票数 0
回答已采纳
当我将我的应用程序打包使用webpack和Reactive16时，我在浏览器中得到了“未定义的ReferenceError: require : React”。导致错误的资源是react.production.min.js和Reacti-dom.production.min.js(来自node_modules/ are /cjs)。当我检查这些文件时，我清楚地看到了作为错误来源的"require“引用。这种情况不会发生在React 15.6.2 (或更低)中，因为生产包不需要任何要求的调用。看来webpack并没有在转换这些文件，我也不知道为什么。我有谷歌和谷歌，重读webpack的文
浏览 4提问于2017-09-29得票数 5
长期以来一直想使用，owl，，但不能通过npm webpack以任何方式连接它。
官方的发怒了
通过"webpack.ProvidePlugin"将jQuery添加到webpack配置中：
const webpack = require('webpack');
//...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jque
浏览 0提问于2018-07-05得票数 1
回答已采纳
我只是尝试用.tsx转换程序制作一个简单的react应用程序，但是在导入时没有定义react和react：
这是我的输入文件，只有类型记录文件：
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
console.log(ReactDOM);
ReactDOM.render(<div>SUCCESS!</div>, document.getElementById('root'));
控制台输出错误：
undefined
Uncau
浏览 5提问于2017-10-14得票数 3
回答已采纳
1回答
捆绑时未定义Moment
、、、
我试图捆绑moment.js，但捆绑后它一直返回未定义：
我的webpack
var path = require("path");
var webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
frb: "./src/app/loader.js"
},
output: {
path: path.resolve(__dirname, "./src/lib&
浏览 0提问于2018-09-23得票数 1
1回答
我已经使用webpack和导入/导出语法将AngularJS应用程序转换为es6。
除了this关键字之外，所有的工作都很完美。
由于在编译过程中，webpack将我的所有代码都封装到了like(模块)中，因此关键字this在如下函数中变得未定义：
.controller( …, function() {
...
this.myFunc = function() {
someFunction().then(function(data) {
this.someVar = data;
// this === window
});
});
});
在没有捆绑的普通an
浏览 2提问于2019-06-30得票数 0
我正在开发一个应用程序，在这个应用程序中，我更新了使用来自v4的vue cli v4的前端，并得到了一个运行时错误：未定义的ReferenceError: process。在我使用的jsonwebtoken库中引用了 Process.version。见下文：
在编译过程中，我遇到了一些与Polly填充模块相关的错误，由于vue cli v5使用webpack 5修复了下面的错误：
fallback: {
crypto: require.resolve('crypto-browserify'),
buffer: require.resolve('buf
浏览 6提问于2022-04-20得票数 1
回答已采纳
1回答
使用的框架
角度: 5.2.3
基金会: 6.2.4
创建了一个角应用程序
> ng new foundation-plugin-app --style=sass
> cd foundation-plugin-app
> npm install foundation-sites --save
在这之前，一切都如期而至。
然后我加入了
> npm install foundation-datepicker --save
这就是如何初始化插件。
$('#scenario_start_date').fdatepicker({
initial
浏览 1提问于2018-02-05得票数 1
我找不到webpack 3号的任何文件。
目前我使用的是webpack 4，我想使用webpack 4中不支持的extract-text-webpack-plugin，所以我想降级到extract-text-webpack-plugin 3，因为它一直支持到那个版本。
有什么办法可以得到webpack v3的文档吗？
浏览 0提问于2018-03-07得票数 27
回答已采纳
因此，我尝试在我的react应用程序中使用Material UI。我曾尝试使用Material UI版本0.20.1和0.20.0，但收到此错误消息
TypeError: Object(...) is not a function
它指向这条线
export default withStyles(styles)(NavBar);
我只是想创建一个导航栏，我已经尝试了很多东西。包括从文档中复制，但似乎不起作用。
下面是整个组件
import React from 'react';
import { withStyles } from 'material-ui/styles
浏览 0提问于2018-06-08得票数 4
回答已采纳
我正在构建一个Range7应用程序，当我添加一个包npm install dragula --save并将其导入到pollyfills.ts文件中时，我会得到以下错误：
webpack_require (引导代码:83) at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3)在webpack_require (引导代码:83)、对象(引导:83)、对象/节点_模块/dragula/dragua.js (dragula.js:4)处未定义index.js:2 Uncaught : ReferenceError:
浏览 2提问于2019-01-24得票数 45
回答已采纳
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
我把webpack改到了上面的版本，并得到了这个错误。
clean-webpack-plugin: /home/itrus/react/living_goods/build has been removed.
TypeError: Cannot read property 'tapAsync' of undefined
在这里呆了一段时间。任何帮助都将不胜感激。谢谢。
我更改了webpack版本，因为我最初在删除node
浏览 22提问于2021-01-12得票数 0
2回答
代码
这是我的webpack.babel.js
条目部分：
entry: {
vendor: [
"react",
"react-dom"
]
}
// 自动获取路径(主动获取写的逻辑代码)
let files = glob.sync('./src/**/index.js'),
newEntries = files.reduce(function (memo , file) {
let name = /.*\/(.*?)\/index\.js/.exec(file)[1];
浏览 9提问于2016-06-18得票数 10
在将webpack从第3版升级到第4版和第三方软件包后，我得到以下错误：
vue-路由器未能解析异步组件的默认值: TypeError:无法读取未定义的属性“调用”
路由导航过程中的路由器未登录错误：webpack_require：TypeError:无法读取未定义的属性“调用”(引导代码:63)
Webpack.js
const ENV = process.env.NODE_ENV || 'production';
const path = require('path');
const VueLoaderPlugin = require('vu
浏览 1提问于2019-07-19得票数 0
我们有一个电子应用程序，使用角4，NodeJS和电子，Webpack。
我们没有几个UI组件调用child_process & fs模块，因此我们在使用业力运行测试用例时出现了以下错误：
"HeadlessChrome 0.0.0 (Windows100.0.0)错误：'ReferenceError: Object.child_process未定义‘
请提出解决这个问题的方法。
浏览 2提问于2017-09-24得票数 0
2回答
把和webpack.config.dev.js从连接起来后，我就有了隐秘的错误。
只需将其添加到webpack.config.dev.js
const SassLintPlugin = require('sass-lint-webpack')
和
new SassLintPlugin()
运行yarn start之后，我得到了一个错误：“无法读取未定义的属性‘编译’”
有什么办法解决吗？
浏览 1提问于2018-08-26得票数 1
我正在做Laravel和vuejs项目，以前vue模板工作得很好，但是在将Webpack和相关的依赖项升级到v4之后，它显示了下面的错误：
Vue警告:未能挂载组件:模板或呈现函数未定义。
我怎样才能解决这个问题？
浏览 3提问于2019-10-04得票数 0
我刚接触webpack，我想在浏览器中使用console.log进行调试，并通过调用函数来查看工作情况，但每当我尝试在捆绑js文件后执行此操作时，所有内容都显示为未定义。当文件捆绑在一起时，Webpack一定是以某种方式更改了名称，所以即使我创建了一个简单的let x=‘console.log’，我也无法对其进行console.log，甚至当我在控制台中使用它们时，如果没有未定义的函数，我甚至无法调用它们。 我如何解决这个问题，以便我可以调用我在控制台中创建的对象？这是我的简单的webpack配置- const path = require('path')；const Htm
浏览 99提问于2019-02-17得票数 0
我是webpack的新手，我试图打包我编写的两个javascript文件和jquery的源代码。
为此，我编写了webpack.config.js：
var webpack = require('webpack');
module.exports = {
entry: __dirname + '\\js\\root.js',
output: {
path: __dirname + '\\bin',
filename: 'app.bundle.min.js'
},
m
浏览 2提问于2017-08-30得票数 0
2回答
这里我从javascript和nodejs / npm / webpack /主题开始，我在安装npm模块时遇到了一个问题，我不明白为什么.我试过各种包裹，所以我说这一定是个误会.
root/
├── .babelrc
├── .gitignore
├── package.json
├── postcss.config.js
├── webpack.config.js
├── src/
│ ├── js/
│ │ ├── modules/
│ │ ├── ve
浏览 3提问于2020-01-01得票数 1
2回答
我已经更新了我的角4应用程序到角8。应用程序在dev构建中运行良好，而在prod构建中却中断。加载应用程序时，我会得到以下错误。
Uncaught :无法读取在d3.js:8处未定义的属性“文档”./node_ webpack_require /d3/d3.js (d3.js:9554) at Module../src/app/pages/home/dashboard/map/map.component.ts (引导代码:78) at Module../src/app/pages/home/dashboard/map/map.component.ts (main-es2015.js:9841
浏览 0提问于2019-07-22得票数 6
回答已采纳
1回答
问题在于webpack，下面是配置文件：
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var nodeExternals = require('webpack-node-externals');
module.exports = {
devtool: 'source-map',
target:
浏览 2提问于2016-08-23得票数 0
我正在使用Webpack HMR作为Node.js (Koa2)服务器。HMR工作平稳，直到出现错误。HMR在那之后就停止工作了。
例如，当'asdfadsf‘变量未定义时：
[server] [HMR] ReferenceError: asdfadsf is not defined
[server] at Object../server.js (A:\cms2\src\server\server.js:15:1)
[server] at __webpack_require__ (A:\cms2\build\webpack\bootstrap 04a9ee280262a
浏览 1提问于2018-02-24得票数 1
回答已采纳
我想用Next.js (10.0.9版)支持多个Sass文件。
在之后，我安装了sass (v1.32.8，在devDependencies下)。
样式表/globals.scss工作良好，使用import '../styles/globals.scss';导入到页面/_app.tsx中。
但是，如果我添加了包含$base-color: darkblue;的样式/chros.scss，并尝试在globals.scss中使用它，如下所示：
@use 'colors';
body {
color: $base-color;
}
yarn dev报告：
错误-
浏览 4提问于2021-03-30得票数 1
回答已采纳
我想给React项目添加更少的支持。根据这些链接： Adding SASS or LESS support to create-react-app React + CSS Modules + LESS + Webpack 4 我弹出了项目并安装了越来越少的加载器，但我在webpack.config.js中找不到规则部分。为什么我的配置文件与这两个页面中的配置文件不同？(webpack版本为4.1.0) 如何为我的项目添加更少的支持？ ? 如果我添加 {
loader: require.resolve('less-loader'),
}, 为了配置文件，
浏览 24提问于2019-03-06得票数 0
我制作了一个，它与Webpack 4一起工作得很好。当我升级到Webpack 5时，它仍然在编译，但它给了我一些警告：
警告在./src/index.tsx 6:24-35出口'GridContent‘(导入为'GridContent')没有发现’@dlcm/dlcm-共享-模块‘(模块没有导出)
并在浏览器控制台中抛出此错误：
未定义TypeError:无法读取未定义的属性“组件”
它试图使用React.Component类扩展我的组件，但是
var React = __webpack_require__(/*! react */ "react")
浏览 1提问于2021-05-27得票数 2
回答已采纳
2回答
我试着用webpack 4创建动态链接库配置，但我一直收到：
Uncaught ReferenceError: React is not defined
我的配置非常简单：
module.exports = {
entry: {
vendor: ["react", "react-dom"]
},
output: {
filename: "[name]-manifest.dll.js",
path: base.path.project("build"),
library: "[na
浏览 2提问于2018-06-01得票数 1
我有webpacker为基本的vue.js/rails应用程序工作，但我想配置它，以便将手写笔文件编译成css，这样我就可以使用Vuetify了。有人知道怎么做吗？我现有的独立工作平台vuetify/vue.js应用程序有以下webpack配置：
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}
]
},
vue: {
loaders: {
浏览 5提问于2017-11-23得票数 6
2回答
我正试着用vue做一个拉拉项目。我遵循了正确的步骤：
我运行作曲家需要laravel/ui
我运行了php artisan ui vue
我在我的主布局文件app.blade.php中包含了
我运行dev
但是，当我访问我的站点时，组件不会显示，并且在浏览器的控制台中得到一条错误消息：
未定义的ReferenceError: Vue未定义
然后，经过一些搜索，我也注意到"npm“并没有在我的cmd窗口中结束。上面写着：
DONE Compiled succesfully in 4465ms
Your application is running here
浏览 2提问于2020-07-28得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
