Next 12 Error ESM in production, works locally #30347

mateusmirandaalmeida · 2021-10-26T18:24:52Z

What version of Next.js are you using?

12.0.0

What version of Node.js are you using?

v14.17.5

What browser are you using?

Chrome

What operating system are you using?

Linux PopOS

How are you deploying your application?

Vercel

Describe the Bug

Apparently a conflict with Swiper ESM package.
In version 11 of next.js it worked.
we import normal:
import {Swiper, SwiperSlide} from 'swiper/react';
after upgrading to version 12 of the next, in development it works, but in vercel it doesn't

Expected Behavior

info - Loaded env from /var/task/.env.local
2021-10-26T18:13:28.652Z 673e2ff4-a116-4da1-87f0-59e86b91fbf5 ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"SyntaxError: Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.\nCommonJS modules can always be imported via the default export, for example using:\n\nimport pkg from 'react';\nconst { useEffect, useLayoutEffect } = pkg;\n","reason":{"errorType":"SyntaxError","errorMessage":"Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.\nCommonJS modules can always be imported via the default export, for example using:\n\nimport pkg from 'react';\nconst { useEffect, useLayoutEffect } = pkg;\n","stack":["file:///var/task/node_modules/swiper/react/use-isomorphic-layout-effect.js:1","import { useEffect, useLayoutEffect } from 'react';"," ^^^^^^^^^","SyntaxError: Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.","CommonJS modules can always be imported via the default export, for example using:","","import pkg from 'react';","const { useEffect, useLayoutEffect } = pkg;",""," at ModuleJob._instantiate (internal/modules/esm/module_job.js:121:21)"," at async ModuleJob.run (internal/modules/esm/module_job.js:166:5)"," at async Loader.import (internal/modules/esm/loader.js:178:24)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: SyntaxError: Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.","CommonJS modules can always be imported via the default export, for example using:","","import pkg from 'react';","const { useEffect, useLayoutEffect } = pkg;",""," at process. (/var/runtime/index.js:35:15)"," at process.emit (events.js:412:35)"," at processPromiseRejections (internal/process/promises.js:245:33)"," at processTicksAndRejections (internal/process/task_queues.js:96:32)"]}
Unknown application error occurred

To Reproduce

1 - Install swiper@7
2 - Upgrade Next.js to version 12
3 - Publish in Vercel

mateusmirandaalmeida · 2021-10-26T19:29:37Z

Help Me

ijjk · 2021-10-27T02:21:43Z

Hi, please provide a repo with a minimal reproduction to allow further investigation.

rayriffy · 2021-10-27T10:49:53Z

@ijjk I made small reproduction here
https://github.com/rayriffy/next-12-preact-issue-reproduction

Next 11
Preview: https://next-12-preact-issue-reproduction-glvgqi3un-r4yr1ffy.vercel.app/
Vercel log: https://vercel.com/r4yr1ffy/next-12-preact-issue-reproduction/3cTX58q1FX6Lz7c9iB21XNZNJakf

Next 12
Vercel log: https://vercel.com/r4yr1ffy/next-12-preact-issue-reproduction/BQ1RMmMR97pyLdtxkaYnaoVvZRgc

johnrackles · 2021-10-27T10:54:32Z

I wasn't able to make a repo, but the error I'm seeing in prod that isn't there in dev reads like this:

ERROR	file:///var/task/node_modules/swiper/react/use-isomorphic-layout-effect.js:1
import { useEffect, useLayoutEffect } from 'react';
              ^^^^^^^^^SyntaxError: Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.CommonJS modules can always be imported via the default export, for example using:import pkg from 'react';const { useEffect, useLayoutEffect } = pkg;

React, ReactDOM, next and swiper are all at the latest version

rayriffy · 2021-10-27T11:14:32Z

Note here that if change back to normal React build will pass just fine but there will be a problem with server side page instead. (This is runtime screenshot from my other repo, not from reproduction repo)

mateusmirandaalmeida · 2021-10-27T14:57:23Z

Não consegui fazer um repo, mas o erro que estou vendo no prod que não existe no dev é assim:

I have this error

sokra · 2021-10-28T10:47:25Z

import { useEffect, useLayoutEffect } from 'react';
SyntaxError: Named export 'useEffect' not found.

You should be able to fix that error by upgrading node.js from 12 to at least 14.13.0.
Also make sure to upgrade node.js on vercel in the Settings, or via package.json

sokra · 2021-10-28T11:22:38Z

Ok seems like that is related to react being replaced with preact/compat, and that doesn't export e. g. useMemo is a way that is analyseable for node.js ESM.

With "react": "npm:@preact/compat@^17.0.2", in package.json:

$ node -e "import('react').then(e => console.log(Object.keys(e)))"
[
  'Children',
  'Component',
  'Fragment',
  'PureComponent',
  'StrictMode',
  'Suspense',
  'SuspenseList',
  '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
  'cloneElement',
  'createContext',
  'createElement',
  'createFactory',
  'createPortal',
  'createRef',
  'default',
  'findDOMNode',
  'flushSync',
  'forwardRef',
  'hydrate',
  'isValidElement',
  'lazy',
  'memo',
  'render',
  'unmountComponentAtNode',
  'unstable_batchedUpdates',
  'version'
]

sokra · 2021-10-28T11:29:26Z

@developit could we make sure that @preact/compat has the correct exports when imported via Node.js ESM?

Repo:

yarn add @preact/compat preact react
node -e "import('@preact/compat').then(e => console.log(Object.keys(e)))"
There is no useMemo useEffect etc here
node -e "import('react').then(e => console.log(Object.keys(e)))"
There is useMemo etc

It need to has these named exports otherwise import { useMemo } from "@preact/compat" will throw an SyntaxError in Node.js.

Note I'm talking about @preact/compat, not preact/compat

sokra · 2021-10-28T11:37:28Z

As workaround you can opt-out of preferring ESM for node_modules via:

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

howells · 2021-10-28T14:58:44Z

I have this same issue, and setting esmExternals to false as @sokra suggested doesn't seem to resolve the problem.

johnrackles · 2021-10-28T15:04:20Z

import { useEffect, useLayoutEffect } from 'react';
SyntaxError: Named export 'useEffect' not found.

You should be able to fix that error by upgrading node.js from 12 to at least 14.13.0. Also make sure to upgrade node.js on vercel in the Settings, or via package.json

node is set to 14 on vercel. locally I'm using v14.18.0, but this only happens on vercel. So sadly this didn't help. Also setting the esmExternals to false did not help either

sokra · 2021-10-28T15:30:44Z

If it only happens on vercel, but works with local next build && next start you might try that as workaround too:

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

but just guessing. I also seems like you all might have different problems...

developit · 2021-10-28T18:56:52Z

Good catch @sokra - that module was authored before Node had named export inference, will update it.

developit · 2021-10-28T19:32:23Z

Alright, it looks like this might be related to the difference in how @preact/compat and react do re-exports, since the @preact/compat package was only ever being loaded as CJS in Node (it had no Package Exports at all).

// @preact/compat
module.exports = require('preact/compat');

// react
if (process.env.NODE_ENV === 'production') {
    module.exports = require('./cjs/react.production.min.js');
}

I believe the conditional in React's case causes Node's named (re-)export inference to fail, resulting in flat exports from CJS that are taken as named exports. Since there is no conditional in @preact/compat's CJS entry, named exports from the preact/compat import are inferred (though these may be broken? the CJS bundle for preact/compat assigns to exports dynamically in a way I don't recall seeing until now).

sokra · 2021-10-28T20:19:05Z

It's not about the conditional. Node.js actually understands that.

In the @preact/compat case it will follow the following chain:

import "@preact/compat" -> node_modules/@preact/compat/index.js -> node_modules/preact/compat/dist/compat.js

So the analyse-able exports in node_modules/preact/compat/dist/compat.js define the named exports.

e. g. there is exports.createRef= in that file, so that becomes a named exports. But useMemo is only in export.default and not as named export.

What you probably want to do is to add a exports field to @preact/compat/package.json so that it use index.module.js when imported. But you also need to rename that file to index.mjs to make it an ESM.

sushanyadav · 2021-10-29T05:26:48Z

I replaced the swiper with react-slick.
works pretty much the same way.

johnrackles · 2021-11-01T09:31:17Z

If it only happens on vercel, but works with local next build && next start you might try that as workaround too:
// next.config.js
module.exports = {
  outputFileTracing: false,
}
but just guessing. I also seems like you all might have different problems...

This seems to have done the trick for my problem, thank you very much!

ijjk · 2021-11-01T23:12:41Z

@johnrackles did you need to add outputFileTracing: false in the latest version of Next.js v12.0.2?

revskill10 · 2021-11-03T11:15:51Z

@ijjk In our case, we need outputFileTracing as we need to read certFile for https. Any other workaround, too ?
Here's my log

I'm using Next 12.0.2

ijjk · 2021-11-03T14:33:25Z

@revskill10 that sounds related to #30750 which is fixed in v12.0.3-canary.2 of Next.js

johnrackles · 2021-11-04T14:04:11Z

@johnrackles did you need to add outputFileTracing: false in the latest version of Next.js v12.0.2?

yes, I just tried again and it still happenes. I'll try with v12.0.3-canary.2 and report back

edit: yes, v12.0.3-canary.2 seems to fix the problem!

timneutkens · 2021-11-06T09:12:36Z

12.0.3 is out now 👍

JoviDeCroock · 2021-11-09T16:26:18Z

Hey y'all,

I quickly dove into this and used the reproduction so kindly provided by @rayriffy (thank you 🙌 )! So upgrading @preact/compat to 17.0.3 removes the tracing issue. However it surfaces another issue, Next seems to have an issue with deduping packages.

This is mainly an assumption because I've seen it before when porting prefresh to next 12, I saw that as soon as I imported Preact from normal preact it would have two duplicate imports of our options hooks.

The new issue we run into then requires us to comment out the context import so we don't duplicate options hooks throughout the codebase 😅

EDIT: I've tried adding @preact/compat here which did not help

EDIT 2: oh it doesn't happen when we use non-static-generation
When I add the following:

export async function getServerSideProps() {
  return {
    props: { hello: 'world' }
  }
}

it works correctly, if I remove that and it moves to static generation we end up with:

The error

$ next build
info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'context' of undefined
    at T (file:///Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact@10.5.15/node_modules/preact/hooks/dist/hooks.mjs:1:927)
    at file:///Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/storeon@3.1.4_ad5dcda1e50eccb25493ea568112b43e/node_modules/storeon/react/index.js:18:15
    at Object.Page (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/.next/server/pages/index.js:49:98)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2523)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:1767)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /
    at /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/export/index.js:493:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:962:17
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:836:13
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:82:25)

timneutkens · 2021-11-17T15:51:37Z

Going to close this as the initial issue has been solved. @JoviDeCroock could you post that comment in a new issue so that we can triage it?

Update: I've moved that issue to #31538

balazsorban44 · 2022-01-27T08:05:56Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

mateusmirandaalmeida added the bug Issue was opened via the bug report template. label Oct 26, 2021

mateusmirandaalmeida changed the title ~~Next 12 Error in Production~~ Next 12 Error in production, works locally Oct 26, 2021

mateusmirandaalmeida changed the title ~~Next 12 Error in production, works locally~~ Next 12 Error ESM in production, works locally Oct 26, 2021

ijjk added the please add a complete reproduction The issue lacks information for further investigation label Oct 27, 2021

timneutkens mentioned this issue Nov 17, 2021

Preact with Next.js 12.0.3 doesn't dedupe #31538

Open

timneutkens closed this as completed Nov 17, 2021

JoviDeCroock mentioned this issue Nov 17, 2021

Next 12 Error during SSG w/ Preact #31539

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next 12 Error ESM in production, works locally #30347

Next 12 Error ESM in production, works locally #30347

mateusmirandaalmeida commented Oct 26, 2021

mateusmirandaalmeida commented Oct 26, 2021

ijjk commented Oct 27, 2021

rayriffy commented Oct 27, 2021 •

edited

johnrackles commented Oct 27, 2021 •

edited

rayriffy commented Oct 27, 2021 •

edited

mateusmirandaalmeida commented Oct 27, 2021

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021

howells commented Oct 28, 2021

johnrackles commented Oct 28, 2021

sokra commented Oct 28, 2021 •

edited by ijjk

developit commented Oct 28, 2021

developit commented Oct 28, 2021

sokra commented Oct 28, 2021

sushanyadav commented Oct 29, 2021

johnrackles commented Nov 1, 2021

ijjk commented Nov 1, 2021

revskill10 commented Nov 3, 2021 •

edited

ijjk commented Nov 3, 2021

johnrackles commented Nov 4, 2021 •

edited

timneutkens commented Nov 6, 2021

JoviDeCroock commented Nov 9, 2021 •

edited

timneutkens commented Nov 17, 2021 •

edited

balazsorban44 commented Jan 27, 2022

Next 12 Error ESM in production, works locally #30347

Next 12 Error ESM in production, works locally #30347

Comments

mateusmirandaalmeida commented Oct 26, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

mateusmirandaalmeida commented Oct 26, 2021

ijjk commented Oct 27, 2021

rayriffy commented Oct 27, 2021 • edited

johnrackles commented Oct 27, 2021 • edited

rayriffy commented Oct 27, 2021 • edited

mateusmirandaalmeida commented Oct 27, 2021

sokra commented Oct 28, 2021 • edited

sokra commented Oct 28, 2021 • edited

sokra commented Oct 28, 2021 • edited

sokra commented Oct 28, 2021

howells commented Oct 28, 2021

johnrackles commented Oct 28, 2021

sokra commented Oct 28, 2021 • edited by ijjk

developit commented Oct 28, 2021

developit commented Oct 28, 2021

sokra commented Oct 28, 2021

sushanyadav commented Oct 29, 2021

johnrackles commented Nov 1, 2021

ijjk commented Nov 1, 2021

revskill10 commented Nov 3, 2021 • edited

ijjk commented Nov 3, 2021

johnrackles commented Nov 4, 2021 • edited

timneutkens commented Nov 6, 2021

JoviDeCroock commented Nov 9, 2021 • edited

timneutkens commented Nov 17, 2021 • edited

balazsorban44 commented Jan 27, 2022

rayriffy commented Oct 27, 2021 •

edited

johnrackles commented Oct 27, 2021 •

edited

rayriffy commented Oct 27, 2021 •

edited

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021 •

edited

sokra commented Oct 28, 2021 •

edited by ijjk

revskill10 commented Nov 3, 2021 •

edited

johnrackles commented Nov 4, 2021 •

edited

JoviDeCroock commented Nov 9, 2021 •

edited

timneutkens commented Nov 17, 2021 •

edited