Failed to resolve async component default: TypeError: __webpack_require_

本文主要是介绍Failed to resolve async component default: TypeError: __webpack_require__(...) is not a function，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

场景

laravel5.7项目默认的laravel-mix编译
异步路由，观察http异步组件加载成功，路由配置正确

@babel/plugin-syntax-dynamic-import 已正确安装配置并使用

前端没有一个页面有显示内容，只要在路由出口区的部分全无显示

报错

3个警告

app.js:42886 [vue-router] Failed to resolve async component default: TypeError: Cannot read property ‘call’ of undefined
app.js:42886 [vue-router] uncaught error during route navigation:
[vue-router] Failed to resolve async component default: TypeError: webpack_require(…) is not a function

1个致命性错误

app.js:44767 TypeError: Cannot read property ‘call’ of undefined
at webpack_require (app.js:64)
at Object…/node_modules/css-loader/index.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/global/Navigation.vue?vue&type=style&index=0&lang=scss&
(components-global-Navigation-vue~layouts-Layout-vue.js:172)

排错

js控制台报错，疑似js逻辑有问题，特别at __webpack_require__ (app.js:64)，很显然这是一个webpack自带的模板代码导入，但改为同步代码后正常，排除，只能确认错误与异步行为相关
警告信息is not a function，貌似vue-router异步组件被认为返回的不是一个函数？但network显示可以正常加载，返回状态都是200，说明异步组件在前端加载是ok的
猜想*webpack_require* 这种地方报错，只能表明webpack某插件（可影响全局操作及相关loader运行)在某种（这里是异步执行）情况下执行，出现了异常，导致不能正常添加属性方法，从而有TypeError: Cannot read property ‘call’ of undefined的警告，检查流程如下
- mix-manifest.json检查比对导入的路径信息与在服务器端的真实映射文件 ok
- 查阅laravel-mix依赖的插件，关键主要信息如下

  "laravel-mix": {"version": "4.0.15","dev": true,"requires": {"@babel/core": "^7.2.0","@babel/plugin-proposal-object-rest-spread": "^7.2.0","@babel/plugin-transform-runtime": "^7.2.0","@babel/preset-env": "^7.2.0","@babel/runtime": "^7.2.0","extract-text-webpack-plugin": "v4.0.0-beta.0""friendly-errors-webpack-plugin": "^1.6.1","optimize-css-assets-webpack-plugin": "^5.0.1","terser-webpack-plugin": "^1.1.0","vue-loader": "^15.4.2","webpack": "^4.27.1","webpack-cli": "^3.1.2","webpack-dev-server": "^3.1.14",}},

分析

Cannot read property 'call' of undefined警告信息为凭据，查询官方资源发现有一个关于extract-text-webpack-plugin的issue值得关注

TL;DR Use mini-css-extract-plugin instead ?
The webpack >= v4.0.0 ‘support’ for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it’s not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future

简单点讲：webpack4以上放弃了对extract-text-webpack-plugin插件的治疗，需要用`MiniCssExtractPlugin 来修复这个问题。判断可能是该插件在异步操作抽取css时，出错。
__webpack_require__依赖于mix-mainifest.json，而且webpack的一些内部引导代码会依据此内容，生成moduleid（模块标识），管理模块文件的加载顺序及引用次数。

解决

基于上述两点有如下操作
第一次使用laravel-mix操作只用同步形式生成CSS，不涉及js的编译操作
二次编译生成的异步js，确保mix-mainifest.json只有纯js模块关联
在入口html模板文件内，引入全局第一次编译的css就可以了

小结

对于异步组件加载，需要加载css文件，但extract-text-webpack-plugin在异步中不给力的加载行为，会有Cannot read property 'call' of undefined警告，间接影响webpack的模板代码加载，最终出现__webpack_require__(...) is not a function，从而报致命错误Cannot read property 'call' of undefined
所以如果不用替代插件，需要在__webpack_require__的导入内容内容上作手脚，将CSS相关的异步加载排除在外，不给webapck来处理加载，交给浏览器同步下载。
附laravel-mix配置文件

const mix = require('laravel-mix');// 先单独编译css，二次编译关闭，主要是避免mix配置对象污染
// mix.sass('resources/sass/app.scss', 'public/css')mix.js('resources/js/app.js', 'public/js').webpackConfig({output: {chunkFilename: 'js/[name].js'},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules(?!\/foundation-sites)|bower_components/,use: [{loader: 'babel-loader',// 使用mix默认配置babel，会读取项目根目录下的,babelrc配置（内支持import函数）options: Config.babel()}]}]},// 配置路径别名resolve: {alias: {'@': path.resolve(__dirname, 'resources/sass')}}})

这篇关于Failed to resolve async component default: TypeError: __webpack_require__(...) is not a function的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！