Build: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got undefined.

[linus-jansson]

Link to the code that reproduces this issue

https://github.com/linus-jansson/designsystemet/tree/bug-report/unable-to-build-next-14.2.15-mdx

To Reproduce

1. Clone provided repository and switch to branch bug-report/unable-to-build-next-14.2.15-mdx.
2. run yarn && yarn build && yarn build:storefront.
3. Build error is displayed.

Current vs. Expected behavior

After upgradig next to version 14.2.15 the mdx files fails to build completely.

Building throws the following error message for all mdx pages:

Error occurred prerendering page "/grunnleggende". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
    at nM (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61599)
    at nM (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61546)
    at nN (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64546)
    at nB (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nD (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66680)
    at nN (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64853)
    at nB (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:67538)
    at nD (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:66680)
    at nN (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64853)
    at nM (C:\git\design\designsystemet-next\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61156)

Example MDX file:

import { PaletteIcon } from '@navikt/aksel-icons';

import { MenuPageLayout } from '@layouts';
import { TokenList } from '../../../../components/Tokens';

export const metadata = {
  title: 'Farger',
  description:
    'Fargesystemet består av globale farger og et semantisk nivå som beskriver hva fargen skal brukes til.',
};

export default ({ children }) => (
  <MenuPageLayout
    content={children}
    data={{
      title: 'Farger',
      date: '30. mai 2024',
      showMenu: true,
      icon: <PaletteIcon />,
      color: 'red',
    }}
  />
);

## Et fleksibelt fargesystem

Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).

### Navnestruktur

Et semantisk fargenavn er bygget opp av 3 ledd: <br/>
_farge - stryke - vekt_ <br/>

- Background: Som regel bakgrunnen på hele siden (HTML body).
- Surface: Bakgrunnsfargen til en ting. Eks. et panel, en knapp, en seksjon, etc.
- Border: Fargen til en ramme (stroke).
- Text/Icon: Fargen på tekst og ikoner.

## Farge-tokens

<TokenList
  type='color'
  showThemePicker={true}
  showModeSwitcher={true}
/>

Moving back to 14.2.5 everything seems to work as expected.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Enterprise
  Available memory (MB): 32401
  Available CPU cores: 12
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Markdown (MDX)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

It seems to break after upgrading to next@14.2.9

[lumirlumir]

Could you tell me the exact patch version which makes error?

E.x. next@14.2.8 works fine, but next@14.2.9 makes error.

[Innei]

This bug will break server-side render and fallback to CSR.

However, it only has issues in RSC rendering, but there are no problems with page rendering on CSR. So this issue is easy to overlook. But I noticed today that my website suddenly no longer has SSR pre-rendered content. After troubleshooting all the way, I finally arrived here.

[konyogony]

Same issue here, using next@14.2.15 and rendering page.mdx seems to cause this. I found the fix using next@canary and deleting .next.

[linus-jansson]

Could you tell me the exact patch version which makes error?

E.x. next@14.2.8 works fine, but next@14.2.9 makes error.

Could not see patches on github regarding version other than v15x. Is there patch tags of other versions I can see anywhere?

[lumirlumir]

I've tested various versions using the provided link.

After installing dependencies with the yarn command, I ran yarn build && yarn build:storefront.

1. next@14.2.15 and @next/mdx@14.2.15: ❌
2. next@14.2.14 and @next/mdx@14.2.14: ❌
3. next@14.2.9 and @next/mdx@14.2.9: ❌
4. next@14.2.8 and @next/mdx@14.2.8: ✅
5. next@14.2.7 and @next/mdx@14.2.7: ✅
6. next@14.2.6 and @next/mdx@14.2.6: ✅
7. next@14.2.5 and @next/mdx@14.2.5: ✅

It seems that the issue starts from next@14.2.9 and @next/mdx@14.2.9.

You can check the differences between the two versions here:

https://github.com/vercel/next.js/compare/v14.2.8...v14.2.9

I’m currently investigating the problem, and if I find a solution, I’ll submit a PR. Please bear with me for a bit.

---

If anyone else finds the solution first, please feel free to submit a PR for this issue.

---

The issue originates from this commit: https://github.com/vercel/next.js/commit/a882e6e9eaefc8b4570e60d3624e4cdb77e5627d.

Please take a look at the following files:

• packages/next/src/build/webpack-config.ts
• packages/next/src/build/webpack/loaders/next-flight-loader/index.ts

Reverting these two files resolves the problem.

The code has changed significantly in the Canary release, so I believe this issue requires a backporting bug fix.

[linus-jansson]

@lumirlumir

Its named in https://github.com/vercel/next.js/commit/a882e6e9eaefc8b4570e60d3624e4cdb77e5627d that it has been reverted? May be fixed in further releases of nextjs? As @konyogony mentioned.

[konyogony]

To be honest, I think there's no reason to try solving this issue on your own—the Next.js team will probably fix it in a future release. For now, I would stick to using next@canary

[linus-jansson]

For now I am staying on the lower working version. Just wanted to point it out for the contributors.

[lumirlumir]

@linus-jansson Oh, I mean it just needs to be reverted for users who are using versions higher than next@14.2.9.

@konyogony You’re right. I think it’s fixed in the canary release, so trying to fix this issue myself isn’t a good idea.

I just want to say that it needs to be reverted, and need to backport the bug fixes.

[konyogony]

Seems to be fixed in the Nextjs v15. Confirm yourself and close this issue.

[linus-jansson]

Yeah, looks like its fixed. However a lot of other issues have arisen when upgrading to next 15 using mdx ( #71819 ) 😕

Closing this

[github-actions[bot]]

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