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.

Sign up for GitHub

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

Jump to bottom

[NEXT-843] React minified error 130 during build if third party packages are used in client components imported to page.tsx #47232

Closed
1 task done
joulev opened this issue Mar 17, 2023 · 3 comments
Closed
1 task done

[NEXT-843] React minified error 130 during build if third party packages are used in client components imported to page.tsx #47232

joulev opened this issue Mar 17, 2023 · 3 comments
Labels
area: app App directory (appDir: true) Webpack Related to Webpack with Next.js.

Comments

@joulev
Copy link
Contributor

joulev commented Mar 17, 2023 •
edited by balazsorban44
Loading

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64
    Binaries:
      Node: 19.6.0
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: 7.29.1
    Relevant packages:
      next: 13.2.5-canary.5
      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/joulev/debug/tree/nextjs-react-minified-error-130-on-build

To Reproduce

  • Clone the linked repo
  • next build

Describe the Bug

The following error shows up:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= ...

Full log 
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:389)
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:355)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:91)
    at Ce (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:98)
    at Ee (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:113:424)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:222)
    at Ce (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:98)
    at Ee (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:113:424)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:222)
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:93)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:389)
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:355)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:91)
    at Ce (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:98)
    at Ee (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:113:424)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:222)
    at Ce (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:98)
    at Ee (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:113:424)
    at Z (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:112:222)
    at Be (/Users/joulev/dev/www/debug/node_modules/.pnpm/next@13.2.5-canary.5_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:111:93)

The app works fine in dev mode, or in prod mode in v13.2.4.

Note: My claim in the title "error during build if third party packages are used in client components imported to page.tsx" is not guaranteed to be correct. But at least I can guarantee that using react-intersection-observer in the same way as in the reproduction will throw this error during build.

Expected Behavior

It should be able to build normally.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-843
@joulev joulev added the bug Issue was opened via the bug report template. label Mar 17, 2023
@balazsorban44 balazsorban44 added area: Server Components Webpack Related to Webpack with Next.js. area: app App directory (appDir: true) labels Mar 17, 2023
@balazsorban44
Copy link
Member

It seems like the issue is that the package has a class component that is not supported in server components:

https://github.com/thebuilder/react-intersection-observer/blob/main/src/InView.tsx#L65

Although you marked the component with "use client" which for some reason we don't seem to detect correctly in this case. 🤔

Adding "use client" to the page itself or next dev works, so will have to have a closer look.

@balazsorban44 balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Mar 17, 2023
@balazsorban44 balazsorban44 changed the title React minified error 130 during build if third party packages are used in client components imported to page.tsx [NEXT-843] React minified error 130 during build if third party packages are used in client components imported to page.tsx Mar 17, 2023
@joulev
Copy link
Contributor Author

joulev commented Apr 11, 2023

This has been fixed some time between this issue was reported and now. next build can work normally now.

@joulev joulev closed this as completed Apr 11, 2023
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: app App directory (appDir: true) Webpack Related to Webpack with Next.js.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@balazsorban44 @joulev