Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
TechQuery opened this issue Nov 13, 2022 · 2 comments · Fixed by #810
Closed

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

TechQuery opened this issue Nov 13, 2022 · 2 comments · Fixed by #810

Comments

@TechQuery
Copy link

@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
TechQuery added a commit to kaiyuanshe/kaiyuanshe.github.io that referenced this issue Nov 13, 2022
@strickczq
Copy link
Contributor

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
Copy link
Member

Fixed in #810, released in v2.2.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants