appDir: Module resolution error when using a RSC

[kasvith]

Verify canary release

• 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 22.3.0: Thu Jan  5 20:48:54 PST 2023; root:xnu-8792.81.2~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.19.0
  npm: 8.19.3
  Yarn: 1.22.19
  pnpm: 7.26.0
Relevant packages:
  next: 13.1.7-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/kasvith/next13-remirror-react-renderer-error.git

To Reproduce

• Run the project
• Visit http://localhost:3000

Describe the Bug

I want to render React Nodes with React Remirror Renderer(it doesn't load the Editor and produces React Nodes from a given JSON, similar to how MDX works)

So i wanted to use it as a Server Component,
This gives me a weird error like

error - ./node_modules/@remirror/core-utils/dist/remirror-core-utils.js
Attempted import error: 'includes' is not exported from '@remirror/core-helpers' (imported as 'includes').

Import trace for requested module:
./node_modules/@remirror/core-utils/dist/remirror-core-utils.js
./node_modules/@remirror/core/dist/remirror-core.js
./node_modules/@remirror/preset-react/dist/remirror-preset-react.js
./node_modules/@remirror/react/dist/remirror-react.js
./src/app/page.tsx

But the includes from @remirror/core-helpers is already an exported member.
If i switch to use client, it works fine and renders content

Expected Behavior

To provide a better error or solve this if can

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[shuding]

After some investigation it seems to be from node_modules/get-dom-document/lib/get-dom-document.node.mjs which imports module ...and it can't be bundled.

Quick workaround is to have experimental.serverComponentsExternalPackages: ['@remirror/react'] in your next.config.js but we will still try to address it inside Next.js.

[kasvith]

Thanks for insight @shuding

[shuding]

I looked deeper and the reason is actually that @remirror/react imports useState inside, which can't be used inside server components. You need "use client" on top of that file:

"use client"

import {
  Callout,
  CodeBlock,
  createIFrameHandler,
  createLinkHandler,
  Doc,
  Heading,
  MarkMap,
  RemirrorRenderer,
  TextHandler,
} from "@remirror/react";

The error message from Next was wrong and it should be fixed in #45971.

[kasvith]

@shuding can you point me a file which uses it
I thought current imports doesn't use any state

[shuding]

@kasvith render.tsx imports @remirror/react, which imports @remirror/extension-react-component and it has useState inside extension-react-component/src/portals/react-portals.tsx.

[kasvith]

aha, thanks

[github-actions]

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