Using `--turbo` with `next-mdx-remote/rsc` throws `ModuleBuildError`

[devjiwonchoi]

Link to the code that reproduces this issue

https://github.com/devjiwonchoi/repro-next-turbo-mdx-remote-rsc

To Reproduce

1. pnpm i
2. pnpm dev
3. Open http://localhost:3000

Current vs. Expected behavior

Current

Package next-mdx-remote (serverComponentsExtenalPackages or default list) can't be external
The request next-mdx-remote/rsc matches serverComponentsExtenalPackages (or the default list), but it can't be external:
The package seems invalid. require() resolves to a EcmaScript module, which would result in an error in Node.js.

Expected

It should not throw

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.0-canary.23 // Latest available version is detected (14.2.0-canary.23).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
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

This issue has been introduced at next@14.1.1-canary.64
Related PR: #62235

This works when using webpack only (next dev)

_PACK-2927

[devjiwonchoi]

Update: I published remote-mdx, a fork of next-mdx-remote, and resolved the output.

IMHO this is still a bug since webpack can handle this package.

[ctjlewis]

Thank you @devjiwonchoi. Actually using your workaround in the meantime. cc @leerob @jaredpalmer

[FairyPenguin]

Any updates on this,

Same issue with - "next": "14.2.0-canary.56",

[FairyPenguin]

Update: I published remote-mdx, a fork of next-mdx-remote, and resolved the output.

IMHO this is still a bug since webpack can handle this package.

Thanks @devjiwonchoi worked for me on "14.2.0-canary.56"

[Pilaton]

@devjiwonchoi remote-mdx displays an error.

Error: Cannot access Image.propTypes on the server. 
You cannot dot into a client module from a server component. 
You can only pass the imported name through.

[devjiwonchoi]

@Pilaton Could you try this first: https://stackoverflow.com/questions/75831268/next-js-13-server-and-client-components-confusion

[Pilaton]

@devjiwonchoi What exactly is this topic supposed to help me with?
remote-mdx gives an error when passing an 'Image' component to it.

const components = { Image };

<MDXRemote components={components} source={mdx} />

I haven't had time yet to see if the problem is in remote-mdx or next 14.2

[bcigdemoglu]

I get the following error with remote-mdx:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'useState')

Call Stack
f.exports.r.useState
node_modules/.pnpm/remote-mdx@0.0.4_react@18.2.0/node_modules/remote-mdx/dist/index.js (1:31840)
S
node_modules/.pnpm/remote-mdx@0.0.4_react@18.2.0/node_modules/remote-mdx/dist/index.js (1:56687)

[timneutkens]

@bcigdemoglu can you open a new issue with a reproduction as you're mentioning another library it seems.

[devjiwonchoi]

@Pilaton @bcigdemoglu Hi, please open an issue at https://github.com/devjiwonchoi/remote-mdx/issues