Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linus-jansson opened this issue Oct 11, 2024 · 1 comment
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js.

Comments

@linus-jansson
Copy link

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

@linus-jansson linus-jansson added the bug Issue was opened via the bug report template. label Oct 11, 2024
@github-actions github-actions bot added the Markdown (MDX) Related to Markdown with Next.js. label Oct 11, 2024
@lumirlumir
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Markdown (MDX) Related to Markdown with Next.js.
Projects
None yet
Development

No branches or pull requests

2 participants