stackblitz / core

Online IDE powered by Visual Studio Code ⚡️
https://stackblitz.com
MIT License
10.31k stars 920 forks source link

Get "TypeError: require.e is not a function" when using dynamic import #2577

Open fix opened 1 year ago

fix commented 1 year ago

Description of Bug

I have open in stackblitz a project (nextjs based) compiling and running fine on desktop. however when it come to using a Component depending on "qr-scanner". I got this:

TypeError: require.e is not a function 
Call Stack
- fn.e
file:///home/project/.next/static/chunks/webpack.js (336:50)

- a
node_modules/.pnpm/qr-scanner@1.4.2/node_modules/qr-scanner/qr-scanner.min.js (18:241)

- e.createQrEngine
node_modules/.pnpm/qr-scanner@1.4.2/node_modules/qr-scanner/qr-scanner.min.js (19:193)

Using Macbook pro M2

Steps to Reproduce

No steps here in the open, but i guess creating an empty nextjs page referencing qr-scanner will do.

Expected Behavior

No error.

Additional Context/Questions Looking at src code of qr-scanner it seems there is some weird import in createQrEngine https://github.com/nimiq/qr-scanner/blob/master/src/qr-scanner.ts#L628

So i reproduced in my source code some dynamic import

const { some_function } = (await import("some-package")).default;

and got the exact same issue:

Unhandled Runtime Error
TypeError: require.e is not a function

Source
components/comp.tsx (41:39) @ my_function

  39 | useEffect(() => {
  40 |     blabla
> 41 |     const { some_function } = (await import("some-package")).default;
     |                                     ^
  42 |     blabla
  43 |     blabla
  44 |     blabla
fix commented 1 year ago

ok more about it. I was using the browser inside the workspace. When using "external" tab it is working fine.