next.js: ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.18.1

What browser are you using?

N/A

What operating system are you using?

macOS, Alpine

How are you deploying your application?

next start

Describe the Bug

A module which imports an es module and throws an exception at the top level has the exception swallowed and a different (vastly less helpful) exception thrown instead. I am pretty confident that this is a webpack bug, but since next vendors webpack, I’m reporting here.

Expected Behavior

When a module throws an exception during initialization, the exception should be passed to the nearest user exception handler, or crash the application. Instead, a different exception is being thrown due to webpack-generated code.

To Reproduce

Create a file lib/test.ts like the following; require it from any page (I used an API page, may be relevant); request that page.

import { z } from "zod";
throw new Error("error");
export default { z };

You will see the following error in the console, without any stack trace:

error - ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

Things to note:

“zod” could be replaced by any esmodule package. The root cause is that the code generated by webpack uses a dynamic import to import the code, causing to to be an async module.
Exporting { z } is just so that the import doesn’t get tree-shaken-away.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 12
Comments: 15 (4 by maintainers)

Commits related to this issue

update webpack (#33831) https://github.com/webpack/webpack/releases/tag/v5.68.0 fixes https://github.com/vercel/next.js/issues/32360 — committed to vercel/next.js by sokra 2 years ago
update webpack (#33831) https://github.com/webpack/webpack/releases/tag/v5.68.0 fixes https://github.com/vercel/next.js/issues/32360 — committed to natew/next.js by sokra 2 years ago

Most upvoted comments

Seems like this problem is connected to esmExternals experimental feature, which is enabled by default.

I have this problem on 12.0.7 without any underlying error, just having ESM module imported in the project. Turning off experimental feature fixed the issue.

// next.config.js
module.exports = {
  ...,
  experimental: {
    esmExternals: false
  }
}

+19

luixo on Jan 26, 2022

I am facing the same issue in v12.0.9 but in my case surprisingly, next dev works and also deploy on Vercel platform works but somehow the local build using next build fails

humble-barnacle001 on Jan 28, 2022

I’m also facing this issue.

monokaijs on Jan 23, 2022

I’m seeing this as well. I’m pretty sure its a bug that was released in 12.0.2 that blows up the first server side render:

$ npm run dev

> <my-project>@1.0.0 dev
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
warn  - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
info  - automatically enabled Fast Refresh for 1 custom loader
info  - Using external babel configuration from /<project>/client/apps/website/babel.config.js
event - compiled successfully in 11.5s (978 modules)
wait  - compiling /404...
event - compiled successfully in 3.3s (981 modules)
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (webpack-internal:///./<my-file>.ts:5:42)
    at Function.getInitialProps (webpack-internal:///./pages/_document.js:55:58)
    at Object.loadGetInitialProps (/<project>/client/apps/website/node_modules/next/dist/shared/lib/utils.js:69:29)
    at renderDocument (/<project>/client/apps/website/node_modules/next/dist/server/render.js:634:48)
    at Object.renderToHTML (/<project>/client/apps/website/node_modules/next/dist/server/render.js:673:34)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async doRender (/<project>/client/apps/website/node_modules/next/dist/server/next-server.js:1389:38)
    at async /<project>/client/apps/website/node_modules/next/dist/server/next-server.js:1484:28
    at async /<project>/client/apps/website/node_modules/next/dist/server/response-cache.js:63:36
info  - automatically enabled Fast Refresh for 1 custom loader

Try rolling back to 12.0.1 - This fixed it for me.

stan-sack on Jan 15, 2022

Just confirming @luixo’s fix worked for me - I was getting it when importing graphql resolvers and schemas on the apollo-server example.

rozenmd on Jan 28, 2022

Well, Chrome is the interactive debugger for Node too, so strangely the answer is “yes” 🙂 You’ll want to run next using something like node --inspect-brk node_modules/.bin/next dev, then follow the instructions here to launch the interactive debugger.

You may also have luck adding console.log statements before and after every import statement, and then recursively going down the stack until you find the offending module.

Note: I am not affiliated with Next or Vercel; this is just the basic debugging steps that I used identifying the problem myself before creating this bug report.

CGamesPlay on Jan 10, 2022