修复bug: TypeError: __webpack_require__(...) is not a function

最新推荐文章于 2024-06-04 23:25:11 发布

转载最新推荐文章于 2024-06-04 23:25:11 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011806339

文章标签：

#webpack #javascript #runtime #ViewUI

本文解决了在使用React+Redux+PostCSS+Webpack+Ant Design的项目中，升级到Webpack 3.0后，每次修改CSS文件导致的TypeError错误。通过配置extract-text-webpack-plugin插件的allChunks参数解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeError: __webpack_require__(...) is not a function

当前项目使用react+redux+postcss+webpack+ant实现的，本地开启了热更新以及自动刷新。更改js的时候可以正常编译以及刷新浏览器。可是每次修改css保存的时候页面就会报这个错误。很无奈，不知道如何修改。这可能就是工程化带来的副作用之一吧。

解决问题的思路如下：

1、也是项目中第一次引入了postcss，之前都是使用less比较多。怀疑是postcss的问题。也确实是向这个方向查找的，每次搜索都在这postcss关键字，查找无果

2、在postcss的github的issues中搜索，查找不到

3、感谢segmentfault，我在一个回答的评论里面找到了答案

原因是升级到了webapck3.0，使用了extract-text-webpack-plugin插件。此插件在3.0中必须配置和一个叫allChunks: true的参数

const extractMain = new ExtractTextPlugin({
  filename: 'main.css',
  allChunks: true
})

解决了一个问题，感觉很轻松啊

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_miccretti

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ecjrjs_lib_ecjrjs__WEBPACK_IMPORTED_MODULE_23___default.a.init，这个是什么问题？

**My Coding Family**

07-16

1029

🏆本文收录于《全栈Bug调优(实战版)》专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！

three.js报错集锦

Beam

07-23

6938

1、KeyframeTrack 帧动画报错： THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0 代码： // 此处是一个缩放动画 let times = [0, 1] let scales = [0, 0, 0, 1, 1, 1] let scaleKeyframeTrack = new THREE.Keyfra...

参与评论您还未登录，请先登录后发表或查看评论

__webpack_require__(...) is not a function vue报错

muzidanwu的博客

04-08

5160

使用npm install vue-router 安装的router 报错__webpack_require__(...) is not a function，可能是router和webpack的版本不匹配，后执行npm i vue-router@3.2.0，将router的版本换到了3.2.0，重新npm run dev不报错了。

__webpack_require__(...) is not a function

u011102843的专栏

06-24

1万+

源码require('redux-immutable-state-invariant')()错误uncaught TypeError: __webpack_require__(...) is not a function解决方案尝试在 require 语句后面添加 .default ，如下所示require('redux-immutable-state-invariant').default()

iconv-lite TypeError: __webpack_require__(...) is not a function 问题解决

HeroIsUseless的博客

02-18

2642

相信你在遇到这个问题的时候，你是在做electron，这个问题不是你的问题，是iconv-lite对electron不怎么适配，iconv也是同样的道理，最佳的解决方法就是从源码上解决，解决方法如下：在electron工程的node_modules中，找到iconv-lite（前提是你已经安装上了），打开iconv-lite/lib/index.js，在140行~150行之间有这些语句： ...

[webpack问题]TypeError: __webpack_require__(...).context is not a function

前端

10-27

6453

Failed to resolve async component default: TypeError: __webpack_require__(...) is not a function

最新发布

07-08

- 如果 `transpileDependencies` 是 `true`、`false`、`null` 或未定义，就会触发 `TypeError`。 --- ### **解决方案** #### 1. **强制修正为数组格式** 在 `vue.config.js` 中，**显式声明为数组**（即使不需要...

┍ ------------- Electron --------------- ┑ 更新检查错误： TypeError: Cannot read properties of null (reading 'updateInfo') at eval (webpack://weici-ai-assistant/./src/main/main.js?:501:22) at process.processTicksAndRejections (node:internal/process/task_queues:96:5)

07-04

Electron 应用在进行自动更新检查时，如果遇到错误 `TypeError: Cannot read properties of null (reading 'updateInfo')`，通常意味着尝试访问某个为 `null` 的对象的属性 `updateInfo`，而该对象并未被正确初始化...

20221103 webpack打包moment运行后遇到__webpack_require__.hmd is not a function的问题

cx杂谈

11-03

871

webpack打包moment后运行报错的问题

Uncaught TypeError: _webpack_require_.i(...)is not a function

weixin_30520015的博客

03-06

1380

在vue开发中，会遇到这个问题。该问题出现的原因主要是在你引入的方法时，该方法所在的文件里找不到这个方法，或者是方法没有暴露出来。导致引用报错。比如：这个里面就有两个方法不在这个js里面，就会报错转载于:https://www.cnblogs.com/sifo/p/10481702.html...

Uncaught (in promise) TypeError: __webpack_require__.i(...) is not a function

漫游学海之旅

01-11

2万+

利用Webpack包管理，React 项目错误错误原因可在npm中查看

Uncaught TypeError: __webpack_require__.i(...) is not a function

jl381169437的博客

03-14

5919

antd3版本 webpack2 moment2.18.1 出现下面报错时： Uncaught TypeError: webpack_require.i(…) is not a function 除了修改项目根目录moment版本为2.18.1之外，还需要修改node_modules中antd文件夹中的package.json中 moment版本也为2.18.1...

vue 中报错 __webpack_require__.i(…) is not a function

huang100qi的专栏

07-03

8897

重新安装一下包: cnpm install vue-loader vue-html-loader vue-style-loader css-loader --save-dev

（已解决）webpack打包css报错

weixin_43769220的博客

11-16

837

UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function 学习webpack中容易踩一个版本过高的坑版本过高错误问题描述比如我的webpack是3.6.0版本而我的css-loader是5.2.0 这里就会出现这个错误查看css-loader 和 style-loader的版本信息 https://www.npmjs.com/package/css-loader https://www.npmj

分析webpack编译结果, 实现__webpack_require__函数

m0_71485750的博客

06-04

1347

这样我们就是实现了Webpack合并多个模块, 但是当我们读取某一模块的时候, 我们应将它的导出结果缓存起来, 当下一次再导入该模块时, 就不需要再执行这个模块的代码, 直接从缓存中读取导出结果即可, 所以我们需要实现缓存完善上面代码。中的模块函数是使用eval执行的, 这是并且会加上一个注释, 其实这是为了开发者能够在浏览器控制台调试, 由于我们运行的是打包后的代码, 那么报错指向的错误地址就会指向打包后的代码, 是不利于我们调式的;中的key)作为参数, 并运行一个模块, 得到该模块的导出结果。

Uncaught TypeError: _App_vue__WEBPACK_IMPORTED_MODULE_1__.default.use is not a function

06-07

<think>我们正在处理一个Vue应用中的TypeError错误，具体错误信息是："UncaughtTypeError:default.useisnotafunction"。从错误信息来看，问题发生在调用`default.use`时，说明`default`对象上并没有`use`方法。结合引用内容，我们知道Vue应用中这类错误通常与Vue库的导入或使用方式有关。参考提供的三个引用：-引用[1]：错误是`Vue.componentisnotafunction`，通常是因为Vue库未正确加载。-引用[2]：错误是`vue__WEBPACK_IMPORTED_MODULE_20__.reactiveisnotafunction`，可能与Vue版本或构建配置有关。-引用[3]：错误是`Cannotreadpropertiesofundefined(reading'install')`，发生在`Vue.use()`时，说明Vue对象可能未正确导入。当前错误信息与引用[3]最为相似，都是在使用`Vue.use()`（或类似方法）时遇到了问题。在引用[3]中，错误的原因是`Vue`对象是`undefined`，因此无法读取其上的`install`属性（`Vue.use`内部会调用插件的`install`方法）。同样，当前错误中的`default.use`，这里的`default`很可能应该是导入的Vue对象，但实际可能未正确导入。在ES6模块中，我们通常这样导入Vue：```javascriptimportVuefrom'vue';```这时，导入的`Vue`就是模块的默认导出（即`default`）。因此，当我们在代码中写`Vue.use()`时，实际上是在调用这个默认导出的对象上的`use`方法。然而，错误信息中说的是`default.use`，这可能是由于代码被转译后的结果，或者是因为在导入时使用了别名或其他方式导致了`default`属性的出现。常见的可能原因和解决方法：1.**Vue库未正确安装或导入**：-确保已经通过npm或yarn正确安装了Vue。检查`package.json`中是否有`vue`的依赖项，且版本正确。-检查导入语句是否正确。如果使用ES6模块，应该使用`importVuefrom'vue';`。如果是CommonJS，使用`constVue=require('vue');`。2.**Vue库的构建版本问题**：-在webpack等构建工具中，可能需要指定Vue的构建版本。Vue有不同的构建版本，如完整版（包含编译器）和运行时版本。错误可能与使用了错误的构建版本有关。-在webpack配置中，可以通过别名（alias）来指定使用哪个版本。例如，设置别名：```javascriptresolve:{alias:{'vue$':'vue/dist/vue.esm.js'//使用完整版，包含编译器}}```3.**导入语句被错误地转译**：-如果使用Babel等转译工具，并且配置了特殊的插件（如`add-module-exports`）或者使用了非标准的模块系统，可能导致导入的Vue对象结构发生变化。4.**在Vue实例化之前调用了Vue.use()**：-确保在使用`Vue.use()`安装插件之前，Vue已经被导入并初始化。5.**多个Vue实例**：-如果项目中存在多个Vue实例（比如不小心打包了两次Vue库），可能会导致奇怪的问题。检查webpack配置，确保Vue没有被重复打包。6.**版本不兼容**：-检查你使用的插件是否与当前Vue版本兼容。例如，有些插件可能只支持Vue2，而不支持Vue3。根据当前错误信息“default.useisnotafunction”，我们可以重点检查导入的Vue对象是否是预期的Vue构造函数。可以在调用`Vue.use()`之前，打印一下`Vue`对象，查看它到底是什么。例如，在代码中添加：```javascriptconsole.log(Vue);//或者console.log(Vue.default)看具体情况```如果打印出来的是`undefined`，那么说明导入失败；如果打印出来的是一个对象但不是期望的Vue构造函数，则可能是导入方式错误。另外，考虑到webpack构建，有时可能是由于循环依赖或模块加载顺序问题。可以尝试重新安装依赖（删除node_modules和package-lock.json，然后重新安装）。针对用户的具体问题，我们按照以下步骤解决：**步骤1：检查Vue的安装和导入**-确认项目目录下的`package.json`中确实有`vue`的依赖项，并且版本符合要求。-如果通过CDN引入，确保链接正确。**步骤2：检查导入语句**在入口文件（通常是`main.js`或`app.js`）中，确保导入Vue的语句正确：```javascriptimportVuefrom'vue';//正确//而不是import*asVuefrom'vue';//这样导入的是一个模块对象，use方法是Vue.default.use?但通常不这样用```如果使用`import*asVuefrom'vue'`，那么Vue对象上确实没有`use`方法，因为Vue的默认导出被包裹在一个模块对象中，这时你应该使用`Vue.default.use`，但这通常不是推荐的做法。所以应该改为默认导入。**步骤3：检查webpack配置**如果使用webpack，检查是否有配置别名指向正确的Vue构建版本（完整版或运行时版本）。如果没有配置，尝试添加：```javascript//webpack.config.jsmodule.exports={//...resolve:{alias:{'vue$':'vue/dist/vue.esm.js'}}};```**步骤4：检查插件安装顺序**确保在所有插件安装之前，Vue对象已经存在。例如：```javascriptimportVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);//正确```**步骤5：检查Vue插件兼容性**如果错误发生在安装某个特定插件时，检查该插件是否支持当前使用的Vue版本。**步骤6：排除其他可能**-重新安装依赖：`rm-rfnode_modulespackage-lock.json&&npminstall`（在项目根目录下执行）。-清除构建缓存（如webpack的缓存目录），然后重新构建。如果以上步骤仍然无法解决，可能需要检查项目中是否有多个版本的Vue被引入（例如，某些依赖包中引入了Vue，导致冲突）。可以在webpack配置中使用`alias`将Vue指向唯一的版本：```javascriptresolve:{alias:{'vue$':path.resolve(__dirname,'node_modules/vue/dist/vue.esm.js')}}```由于错误信息较为模糊，具体原因可能需要根据项目实际情况排查。但以上步骤覆盖了大部分常见情况。§§相关问题§§1.如何正确导入Vue以避免类似错误？2.Vue2和Vue3在插件使用上有何区别？3.如何在webpack中配置Vue别名？4.如何检查项目中是否有多个版本的Vue？5.Vue.use()方法的作用和原理是什么？</think> ### Vue应用中`Uncaught TypeError: default.use is not a function`的解决方案此错误通常发生在使用webpack构建的Vue项目中，核心问题是**Vue库未正确导入或初始化**。根据引用内容和典型案例分析，以下是主要原因和解决方案： --- #### 主要原因 1. **Vue未正确导入** 在入口文件（如`main.js`）中，`import Vue from 'vue'`语句未生效，导致`Vue`对象是`undefined`或非预期格式[^3]。 2. **Vue版本冲突** 项目依赖中可能存在多个Vue版本（如Vue 2和Vue 3混用），或与其他库（如Vuex、Vue Router）版本不兼容[^2]。 3. **webpack配置问题** 未正确配置模块解析规则（如未设置`resolve.alias`），或未启用`esModule`支持（默认应启用）[^2]。 4. **入口文件执行顺序错误** 在调用`Vue.use()`前，Vue插件（如Vue Router）尚未初始化，或插件导入顺序错误[^3]。 --- #### 分步解决方案 1. **检查Vue导入语句** 确保入口文件中使用标准ESM导入语法： ```javascript // 正确写法 import Vue from 'vue'; // 错误写法：解构或异步导入会导致default异常 import { createApp } from 'vue'; ``` 2. **验证Vue安装与版本** 执行命令检查依赖版本： ```bash npm ls vue vue-router vuex ``` - 若存在多版本冲突，在`package.json`中固定版本： ```json "dependencies": { "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" } ``` 3. **配置webpack别名** 在`webpack.config.js`中添加Vue的别名解析规则： ```javascript module.exports = { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 明确指向ES模块版本 } } }; ``` 4. **修正插件初始化顺序** 确保先导入Vue，再加载插件： ```javascript // main.js import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.use(VueRouter); // ✅ 在new Vue()前调用 new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 5. **清理构建缓存** 删除以下目录后重新安装依赖： ```bash rm -rf node_modules/.cache # 清除webpack缓存 rm -rf dist # 删除旧构建产物 npm install # 重装依赖 ``` --- #### 预防措施 - 使用`Vue CLI`创建项目而非手动配置webpack - 所有插件调用`Vue.use()`的操作集中在入口文件顶部 - 定期更新依赖版本时，检查[Vue兼容性列表](https://github.com/vuejs/vue-next#compatibility-note)