Multiple 'use client' components exported from barrel file cause "Lazy element type must resolve to a class or function" error

[bjfresh]

Link to the code that reproduces this issue

https://github.com/bjfresh/next14-turbo-lazy-error

To Reproduce

1. pnpm clean && pnpm i
2. pnpm dev (runs with --turbo)
3. Page won't render

If 'use client' is commented out in either Test1.tsx or TBAccount.tsx, the page will then render fine.

Current vs. Expected behavior

Current behaviour:

I have a large repo that works well in both Next 13 and Next 14 with the default dev configuration. This repo is derived from a fairly minimal Web3 starter that I've assembled. I'm hoping to start working with Turbopack.

When run using pnpm dev --turbo, I consistently get the following error that prevents render:

Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

I've tracked this back to a quirk in how Turbopack seems to handle imports from barrel files. It seems as though Turbopack cannot handle multiple components with 'use client' being exported from the same file. Generally I export components from a barrel like so:

// Barrel file for components
// Add exports here so they can be consumed from a single import

export * from './TBAccount'
export * from './Test1'

and import as such:

import { Test1 } from '@/components'

The two files I'm exporting (just minimal example components) look like this:

Test1.tsx

'use client'

export function Test1() {
  return <>Test 1</>
}

TBAccount.tsx

'use client'

export function TBAccount() {
  return <>TBA</>
}

If both components specify 'use client', the "Lazy element type must resolve to a class or function" error is thrown, even if I'm only importing Test1 in page.tsx. If I comment out 'use client' in either file, the page will render as expected.

page.tsx

import { clsx } from 'clsx'

import { Test1 } from '@/components'

export default function FPHome() {
  return (
    <main className={clsx('flex flex-col gap-5 flex-1 justify-center items-center')}>
      <Test1 />
    </main>
  )
}

Expected behaviour: components exported from barrel file can be imported and function correctly. This works in Next 13 and Next 14 with the default configuration but not with the --turbo flag enabled.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:34 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8103
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.14.0
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Turbopack (--turbo)

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

next dev (local)

Additional context

There are a few issues reporting similar problems with less specificity:

https://github.com/vercel/next.js/issues/59804

@OlegLustenko pointed out this started occurring with 14.0.4-canary.41 + possibly the associated PR https://github.com/vercel/next.js/pull/59254 (cc: @shuding)

Also: https://github.com/vercel/next.js/issues/59535 https://github.com/vercel/next.js/discussions/59534 https://github.com/vercel/next.js/issues/59386

_PACK-2223

[OlegLustenko]

@bjfresh thanks for mentioning!

I believe it might not be the worst idea to revert https://github.com/vercel/next.js/pull/59254 since there is no ETA for a fix.

At least it will unblock a huge number of people from updating to the latest version

[ForsakenHarmony]

This should be fixed with the latest canary as of yesterday, can you try again?

[bjfresh]

@ForsakenHarmony seems to work with the latest canary release, yes, in both my minimal repo and the production site. Excellent!

Ex-Berliner here, too.

[OlegLustenko]

@ForsakenHarmony this is not is fixed definitely https://github.com/vercel/next.js/issues/59804

[ForsakenHarmony]

@OlegLustenko that sounds like a different issue then (I think this one is primarily about turbopack), could you open an issue with a reproduction?

[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.