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

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1054653

相关文章

AutoGen Function Call 函数调用解析(一)

目录 一、AutoGen Function Call 1.1 register_for_llm 注册调用 1.2 register_for_execution 注册执行 1.3 三种注册方法 1.3.1 函数定义和注册分开 1.3.2 定义函数时注册 1.3.3  register_function 函数注册 二、实例 本文主要对 AutoGen Function Call

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面,引入了一个子组件,在父组件中调用子组件的方法时,报错提示: [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods

(function() {})();只执行一次

测试例子: var xx = (function() {     (function() { alert(9) })(); alert(10)     return "yyyy";  })(); 调用: alert(xx); 在调用的时候,你会发现只弹出"yyyy"信息,并不见弹出"10"的信息!这也就是说,这个匿名函数只在立即调用的时候执行一次,这时它已经赋予了给xx变量,也就是只是

js私有作用域(function(){})(); 模仿块级作用域

摘自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域,简单的例子: for(var i=0;i<10;i++){alert(i);}alert(i); for循环后的i,在其它语言像c、java中,会在for结束后被销毁,但js在后续的操作中仍然能访

android java.io.IOException: open failed: ENOENT (No such file or directory)-api23+权限受权

问题描述 在安卓上,清单明明已经受权了读写文件权限,但偏偏就是创建不了目录和文件 调用mkdirs()总是返回false. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.READ_E

UserWarning: mkl-service package failed to import

安装完成anaconda,并设置了两个环境变量  之后再控制台运行python环境,输入import numpy as np,提示错误 D:\InstallFolder\Anaconda3\lib\site-packages\numpy\__init__.py:143: UserWarning: mkl-service package failed to import, therefore

Python安装llama库出错“metadata-generation-failed”

Python安装llama库出错“metadata-generation-failed” 1. 安装llama库时出错2. 定位问题1. 去官网下载llama包 2.修改配置文件2.1 解压文件2.2 修改配置文件 3. 本地安装文件 1. 安装llama库时出错 2. 定位问题 根据查到的资料,发现时llama包中的execfile函数已经被下线了,需要我们手动修改代码后

rtklib.h : RTKLIB constants, types and function prototypes 解释

在 RTKLIB 中,rtklib.h 是一个头文件,包含了与 RTKLIB 相关的常量、类型和函数原型。以下是该头文件的一些常见内容和翻译说明: 1. 常量 (Constants) rtklib.h 中定义的常量通常包括: 系统常量: 例如,GPS、GLONASS、GALILEO 等系统的常量定义。 时间常量: 如一年、一天的秒数等。 精度常量: 如距离、速度的精度标准。 2. 类型

MongoDB学习—(1)安装时出现The default storage engine 'wiredTiger' is not available问题解决

MongoDB是NoSql类型的一种基于分布式文件存储的数据库,其存储方式与关系型数据库不同。其详细解释可见于[百科]。安装文件可从官网下载,官网:http://mongodb.org 我将下载的解压文件放到D盘的mongodb文件夹下,

context:component-scan使用说明!

<!-- 使用annotation 自动注册bean, 并保证@Required、@Autowired的属性被注入 --> <context:component-scan base-package="com.yuanls"/> 在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controll