[bug] React component failed to build with Next.js 12

[TechQuery]

@giscus

What happened?

When I update giscus-react from 2.2.2 to 2.2.3, Next.js 12 building crashed with an error:

info  - Collecting page data .Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\@[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\react\jsx-runtime' imported from D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\@[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\@giscus\react\dist\index.mjs    
Did you mean to import [email protected]/node_modules/react/jsx-runtime.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:837:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

> Build error occurred
Error: Failed to collect page data for /article/[id]
    at D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\build\utils.js:916:15 {
  type: 'Error'
}

Environment

Software	Version(s)
React	17.0.2
Next.js	12.3.3
Node	16.18.0
PNPM	7.15.0
Operating System	Windows 10 Pro 21H2

[strickczq]

About this issue

This is actually an issue from react facebook/react#20235, exports map is required for es modules in node to support extensionless imports.

And by this pr facebook/react#20304 (adding "exports": {...} to its package.json), the problem was fixed 2 years ago.

Sadly, there is no released version that contains the fix because they think ESM configurations and setups are very fragile, until they released [email protected].

For detail, see https://esm.sh/[email protected]/package.json and https://esm.sh/[email protected]/package.json

Possible Solutions

For users:

• Stay @giscus/[email protected]
• Upgrade to react@^18.0.0
• Hacky methods:
  • (make esm exports map works) Use your package manager to patch react's package.json and add correct "exports": {...}
  • (without exports map) Use babel plugin, webpack alias or any other tool to rename import ... from 'react/jsx-runtime' to import ... from 'react/jsx-runtime.js'

For @giscus/react

• Do not use .mjs extension to support react@<18.0.0. (May cause other problems, is that reasonable?)

[laymonage]

Fixed in #810, released in v2.2.4.