未捕获的类型错误：__webpack_require__(...).context 不是函数

Question

当我尝试使用以下代码动态导入 vue 组件时：

const components = require.context('./', true, '/^index\.js$/');

我收到此错误：

app.js:9 Uncaught TypeError: __webpack_require__(...).context is not a function
    at Module../asset/app.js (app.js:9)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (app.293d5fe1d8a073fed37a.bundle.js:1747)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at bootstrap:858
    at bootstrap:858

这是为什么？如何解决？我错过了什么？

Answer 1

角15

从 Angular 14 升级到 Angular 15 后，我的应用程序中遇到了类似的问题。我通过编辑文件并在项目中通过删除并添加以下内容来更改它来解决此问题：angular.json"test""options""main": "src/test.ts",

"polyfills": ["zone.js", "zone.js/testing"],

然后src/test.ts可以删除该文件

Answer 2

尝试将第三个参数从字符串更改为正则表达式，即：

const components = require.context('./', true, /^index.js$/)

我有一些有效的正则表达式的用法，以及我正在尝试整理的其他用法，它们不使用像这样的内联正则表达式。

旁注：您要求查找从“./”向下的所有内容（递归：您将该标志设置为true），但只接受一个文件：index.js在基本文件夹中。如果这就是您想要的，我建议将递归标志更改为 false - 它会更快。

Answer 3

角15

将 Angular 从 14 更新到 15 后，我遇到了同样的错误。但我在应用程序逻辑中使用 require.context - 所以删除测试文件对我来说还不够。

相反，我用import.meta.webpackContext( ) 替换了 require.context() 。

前：

(require as any).context(
    'frontmatter-markdown-loader!./blog-content/',
    true,
    /^\.\/.+\.md$/
)

后：

(import.meta as any).webpackContext(
    'frontmatter-markdown-loader!./blog-content/', 
    { recursive: true, regExp: /^\.\/.+\.md$/ }
)