next.js: Build error on Vercel deployments after upgrading to 13.4

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,
},

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 https://github.com/vercel/next.js/issues/48302 as well
• seems it will be fixed in https://github.com/vercel/next.js/pull/49274

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,
},

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.

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)

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.

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.

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