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

[devjiwonchoi]

@bcigdemoglu did some update on it, could you try the latest version?

[devjiwonchoi]

@Pilaton the error seems to be with mishandling client / server component, not on nextjs or remote-mdx

Open issue w repro to remote-mdx repo, I'll be glad to take a look!

[dcodesdev]

Using next@14.2.3 same issue

[leerob]

const nextConfig = {
  transpilePackages: ['next-mdx-remote'],
}

export default nextConfig;

^ Temporary workaround, duplicate issue here (#64525) which is being worked on (open PR #64918).

[devjiwonchoi]

@leerob @ForsakenHarmony I may be wrong but since the package I published remote-mdx is also a Native ESM package, the reason for the error may be different.

The error message I received is from the code below when the file is ESM, but the syntax is not ESM.

next.js/packages/next-swc/crates/next-core/src/next_server/resolve.rs

Lines 416 to 423 in 270a9db

	(FileType::EcmaScriptModule, false) => {
	// even with require() this resolves to a ESM,
	// which would break node.js, bundle it
	unable_to_externalize(
	request_str,
	"The package seems invalid. require() resolves to a EcmaScript module, which \
	would result in an error in Node.js.",
	)

Therefore, I suspected having CommonJS syntax on the ESM module (.js file).

Where the output of next-mdx-remote's ./dist/rsc.js should be ESM syntax but has CJS syntax in it, resulting an error I believe.

Tried to fix it but unfortunately I'm not a Rustacean yet... 😅

[papadavis47]

I ran into this issue when upgrading packages today for my blog . The workaround mentioned by @leerob did the trick for me.

[github-actions]

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.