CODEWITHSUNDEEP
webpackwebpack-4
webprogrammer
webprogrammer

Reputation: 2477

Uncaught TypeError: __webpack_require__(…).context is not a function

When I am trying to import dynamically vue components using this code:

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

I am getting this error:

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

Why is that? How to fix that? What have I missed?

Upvotes: 23

Views: 32882

Answers (4)

Francesco Borzi
Francesco Borzi

Reputation: 61724

Angular 15

I ended up here after getting a similar issue in my app after upgrading from Angular 14 to Angular 15. I solved it this way by editing the angular.json file and in the project "test" changing its "options" by removing "main": "src/test.ts", and adding this instead:

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

then the src/test.ts file can be removed

Upvotes: 32

muldbjerg
muldbjerg

Reputation: 101

Angular 15

I'm got the same error after updating Angular from 14 to 15. But I'm using require.context inside my app logic - so removing the test files wasn't enough for me.

Instead, I replaced require.context() with import.meta.webpackContext().

Before:

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

After:

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

Upvotes: 10

YuanHao
YuanHao

Reputation: 41

doc link

there is a sentence The arguments passed to require.context must be literals in docs. The third argument should be a literals like /^index.js$/. I got the same error when I used new RegExp()

Upvotes: 3

daf
daf

Reputation: 1329

Try changing the third argument from a string to a regex, ie:

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

I have usages with regexes which work, and others which I'm trying to sort out, which don't use an inline regex like this one.

Side-note: you're asking to find everything from './' downward (recursive: you're setting that flag to true), but will only accept one file: index.js in the base folder. If that's all you want, I'd suggest changing the recursive flag to false -- it will be quicker.

Upvotes: 10

Related Questions