Build error on Vercel deployments after upgrading to 13.4 #49261

laubonghaudoi · 2023-05-05T00:17:28Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64
    Binaries:
      Node: 16.13.2
      npm: 9.6.4
      Yarn: 3.4.1
      pnpm: 7.21.0
    Relevant packages:
      next: 13.4.0
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

none

To Reproduce

Upgrade next from ^13.3.4 tp ^13.4.0. The project is using pages/, not using app/dir nor turbopack.

Describe the Bug

I just updated the nextJS version from 13.3 to 13.4 without change anything in my codebase. The local build is successful without any errors, but when deployed on Vercel, I got hundreds of lines of error like

Error occurred prerendering page "/en/post/100". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useEffect')
    at exports.useEffect (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:292)
    at Analytics (file:///vercel/path0/node_modules/@vercel/analytics/dist/react/index.js:132:3)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:273)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at He (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Je (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:119:95)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:9)

I speculate that this is caused by my components not being specified as client components. But I am not using the app/ directory, I am only using the /pages. Does that mean I need to specify client components even if I am using /pages? I tried adding 'use client' to the top of my component files and the error still persists.

The local builds are successful without any errors, this only happens on Vercel deployments.

Expected Behavior

Build should be successful with no error.

Which browser are you using? (if relevant)

irrelevant

How are you deploying your application? (if relevant)

Vercel

The text was updated successfully, but these errors were encountered:

lucasishuman · 2023-05-05T00:23:55Z

FYI - related discussion - #49251

kgilliam125 · 2023-05-05T00:53:42Z

@laubonghaudoi Ran into the same issue you're describing with a previously working build. This is silly, but did you make sure to yarn/npm install again after you reverted the version in your package.json?

My build seems to be running again on Next 13.3.4 but is broken in 13.4

benjwexler · 2023-05-05T01:47:46Z

I was facing a similar issue after trying to upgrade locally for a Next app using a custom server. Adding the following to next.config.js seems to have fixed the issue:

experimental: {
  appDir: false,
},

joachimjusth · 2023-05-05T01:54:56Z

I had also the same issue when I did the migration to Next 13.4.

I added the flag given by @benjwexler , and now it deploy without any issue.

I was facing a similar issue after trying to upgrade locally for a Next app using a custom server. Adding the following to next.config.js seems to have fixed the issue:
experimental: {
  appDir: false,
},

skaraudio · 2023-05-05T02:09:22Z

I was facing a similar issue after trying to upgrade locally for a Next app using a custom server. Adding the following to next.config.js seems to have fixed the issue:
experimental: {
  appDir: false,
},

Thank you!!

lucasishuman · 2023-05-05T02:21:32Z

Thanks for the config tips, all.

Next needs to add that to the pages docs if it's now explicitly required to 'opt out' of app directory...

https://nextjs.org/docs/pages/api-reference/next-config-js

- Workaround for vercel/next.js#49261

* ⬆️ Bump next from 13.2.4 to 13.4.0 Bumps [next](https://github.com/vercel/next.js) from 13.2.4 to 13.4.0. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v13.2.4...v13.4.0) --- updated-dependencies: - dependency-name: next dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * 🐛 Opt-out of appDir - Workaround for vercel/next.js#49261 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Nick Oates <nick@nickoates.com>

belgattitude · 2023-05-05T07:39:11Z

Have the same issue after upgrade to nextjs 13.4.0 (from 13.3.4) - no app dir - no type module

The example repo is:

https://github.com/belgattitude/nextjs-monorepo-example (branch main)

The ci passes (https://github.com/belgattitude/nextjs-monorepo-example/actions/workflows/ci-nextjs-app.yml), vercel just started to break after upgrade.

If you want to try on vercel, you'll have to add ENABLE_EXPERIMENTAL_COREPACK=1 in the vercel env.

The deployment url: https://monorepo-nextjs-app.vercel.app/

Open to help if needed

PS:

might be related to [NEXT-1032] A Node.js API is used (process.turbopack at line: 47) which is not supported in the Edge Runtime. #48302 as well
seems it will be fixed in Fix require-hook with just pages on deploy #49274

laubonghaudoi · 2023-05-12T06:09:24Z

It seems like this issue is happening again in 13.4.2. The error message is different tho, this time it's

Type error: 'MyComponent' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.

Local build is fine but Vercel deployment fails, same as 13.4.0

imyuanli · 2023-05-12T08:22:58Z

Adding the ’ appDir: false‘ configuration item still has the same error

"next": "13.4.2"

looterz · 2023-05-13T21:58:49Z

Adding the ’ appDir: false‘ configuration item still has the same error

"next": "13.4.2"

Same here. I ended up removing it entirely since its "stable" and still get the issue. Tried forcing my pages to force-dynamic and it builds but I get errors in production.

stephenasuncionDEV · 2023-05-14T02:35:02Z

It seems like this issue is happening again in 13.4.2. The error message is different tho, this time it's
Type error: 'MyComponent' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
Local build is fine but Vercel deployment fails, same as 13.4.0

I am also getting cannot be used as a JSX component. when using a dynamic import.

const Payments = dynamic(() => import("@/components/Account/Payments"), {
  loading: () => <Loading />,
});
...
<AccountLayout curPage={curPage}>
        {
          {
            payments: <Payments />,
            ...
          }[curPage]
        }
      </AccountLayout>

Error:

'Payments' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import(".../node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.ts(2786)

MathurAditya724 · 2023-05-22T15:13:32Z

Hey, I am facing the same issue in the latest build of nextjs. I have listed the issues and examples in greater detail on the Tanstack issues, check it out here.

Basically, it is not working in a mono repo created using nx, the build is failing.

doug-shontz · 2023-05-24T10:54:24Z

We are having the same issue as @MathurAditya724 using NX as well (>=v16). Our error is of the "Cannot read properties of null (reading 'useEffect')" variant and we are also using Tanstack Query (which is how I got to this issue). When I downgrade to Next 13.3.4 everything works correctly, but anything past 13.4.x generates the error.

MathurAditya724 · 2023-05-24T18:11:40Z

Hey, just upgrade your next package to the latest version or the Canary version. We upgraded to ^13.4.4-canary.1, and everything started working like normal.

busla · 2023-05-24T20:37:17Z

updated to 13.4.4-canary.8 and nx/next:build executor started working again

github-actions · 2023-06-24T00:04:17Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

laubonghaudoi added the bug Issue was opened via the bug report template. label May 5, 2023

n1ckoates added a commit to n1ckoates/blog that referenced this issue May 5, 2023

🐛 Opt-out of appDir

36dba06

- Workaround for vercel/next.js#49261

jd-carroll mentioned this issue May 5, 2023

TypeError: Cannot read properties of null (reading 'useEffect') [Next.JS v13.4.0] vercel/analytics#79

Closed

icyJoseph mentioned this issue May 5, 2023

Remove experimental config from create-next-app #49241

Merged

ijjk mentioned this issue May 5, 2023

Fix require-hook with just pages on deploy #49274

Merged

This was referenced May 5, 2023

TypeError: Cannot read properties of null (reading 'useEffect') TanStack/query#5371

Closed

useMemo problem in Next js when using contentlayer #49267

Closed

huozhi closed this as completed in #49274 May 5, 2023

belgattitude mentioned this issue May 5, 2023

chore(deps): next to 13.4.1 belgattitude/nextjs-monorepo-example#3775

Merged

ardasisbot mentioned this issue May 7, 2023

Fix model dependencies ardasisbot/embedding-search-pg#2

Merged

This was referenced May 10, 2023

Fix keystone dev errors for next@^13.4.0 keystonejs/keystone#8568

Merged

Next ^13.4 is not working with Keystone keystonejs/keystone#8553

Closed

laubonghaudoi mentioned this issue May 14, 2023

React is null in vercel production build #49753

Closed

1 task

github-actions bot locked as resolved and limited conversation to collaborators Jun 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build error on Vercel deployments after upgrading to 13.4 #49261

Build error on Vercel deployments after upgrading to 13.4 #49261

laubonghaudoi commented May 5, 2023

lucasishuman commented May 5, 2023

kgilliam125 commented May 5, 2023

benjwexler commented May 5, 2023

joachimjusth commented May 5, 2023

skaraudio commented May 5, 2023

lucasishuman commented May 5, 2023

belgattitude commented May 5, 2023 •

edited

Loading

laubonghaudoi commented May 12, 2023 •

edited

Loading

imyuanli commented May 12, 2023 •

edited

Loading

looterz commented May 13, 2023

stephenasuncionDEV commented May 14, 2023

MathurAditya724 commented May 22, 2023

doug-shontz commented May 24, 2023

MathurAditya724 commented May 24, 2023

busla commented May 24, 2023

github-actions bot commented Jun 24, 2023

Build error on Vercel deployments after upgrading to 13.4 #49261

Build error on Vercel deployments after upgrading to 13.4 #49261

Comments

laubonghaudoi commented May 5, 2023

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

lucasishuman commented May 5, 2023

kgilliam125 commented May 5, 2023

benjwexler commented May 5, 2023

joachimjusth commented May 5, 2023

skaraudio commented May 5, 2023

lucasishuman commented May 5, 2023

belgattitude commented May 5, 2023 • edited Loading

laubonghaudoi commented May 12, 2023 • edited Loading

imyuanli commented May 12, 2023 • edited Loading

looterz commented May 13, 2023

stephenasuncionDEV commented May 14, 2023

MathurAditya724 commented May 22, 2023

doug-shontz commented May 24, 2023

MathurAditya724 commented May 24, 2023

busla commented May 24, 2023

github-actions bot commented Jun 24, 2023

belgattitude commented May 5, 2023 •

edited

Loading

laubonghaudoi commented May 12, 2023 •

edited

Loading

imyuanli commented May 12, 2023 •

edited

Loading