-
Notifications
You must be signed in to change notification settings - Fork 26.2k
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
9.5.0 introduced compile error / breaks when using the pnpm package manager #15616
Comments
|
Interesting @IanMitchell . With the above example repo, I don't see this using npm (6.14.4). Can you confirm my example repo doesn't work with you for npm (and if so what version of npm / node?) (Look out for stray node_modules/ in parent directories, i have seen those cause similar webpack errors around duplicate 'react/package versions'). Locally I can use the example repo and npm to build and run via next without any issues. Tested on 2 machines. |
Whoops, you're right - I wasn't seeing the same thing, I was getting a different bug covered by an existing report / PR. My bad for not reading the stack trace carefully enough, sorry! |
I can repo with 9.4.5-canary.8 (9.4.5-canary.7 issue is not present) |
Via some bi-secting This appears to be introduced by |
removing the use of this hook gets rid of the 'you may be violating the rules of hooks' error. I tweaked (_document.tsx) The above hack lead me to this apparently bad import https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/lib/path-match.ts#L1 import * as pathToRegexp from 'next/dist/compiled/path-to-regexp' This package is missing here: https://github.com/vercel/next.js/tree/canary/packages/next/compiled changing path-match.ts and removing the use of a hook in _document.tsx Change: Not sure yet why I am getting the hook error only from pnpm. I will dig more tomorrow potentially raise a PR |
I've unmarked this as p0 because this appears to be a bug with
|
Marking this as a duplicate of #9022 |
@Timer I followed the following procedure and found the same instance of react. pnpm points things via symlinks links to single shared versions of these packages. Can you share how you produced the above snippet? https://reactjs.org/warnings/invalid-hook-call-warning.html // Add this in your component file Same version of pnpm, this works fine previous to this change. |
This does feel like a pnpm bug , the work around here fixes my example repo |
I don't see duplicated. This and this are just symlinks to the same directory: Seems like a bug in React. React should resolve these symlinks to their real locations. That's how node's resolution algorithm works. |
I agree @zkochan not pnpm bug, all same copies of React. While the workaround 'worked', it should not be needed at all. |
tl;dr Did some debugging; here's what I found. The issue is in this handleExternals function where Next.js determines which modules webpack should include in the server bundle (written to I added some log statements to this function and ran with npm
with pnpm
Using npm, we get our desired result: the Using pnpm,
This happens because next.js/packages/next/build/webpack-config.ts Line 599 in 07df897
next.js/packages/next/build/webpack-config.ts Line 637 in 07df897
If If we take this example:
Both of these paths actually resolve to the same location on disk:
So, I think the root cause of this issue is that the |
I made a pull request which updates the behaviour of This fixes the problem described in this issue. However it does not resolve the issue which this is marked as a duplicate of: #9022. Importing React components from outside of the project folder is a slightly different issue due to the fact that you can have different copies of the React package on disk. Appreciate if a maintainer can re-open this issue. |
Would love to see #16369 merged as well. We are currently on a pnpm monorepo and this issue is preventing us from upgrading to 9.5 from 9.4. #9022 seems to be a slew of issues where duplicate react is a symptom and not necessarily related to this specific issue that @elliottsj has root caused so I too would appreciate if the maintainers can perhaps re-open this and consider #16369. |
@elliottsj I missed this PR and created a similar one (but made it pnpm specific) and attached it to |
@bitfrost What you mean with postinstall? |
In my own projects, I setup something like: |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Upgrading a hello world project from 9.4.4 to 9.5.0 when using pnpm introduces a compile error for next build (see below)
To Reproduce
install pnpm on your system.
clone example repo https://github.com/bitfrost/example_pnpm_next_issue
cd into repo
run:
pnpm install
pnpm next build
Get
Creating an optimized production build
Compiled successfully.
Automatically optimizing pages ..
Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Z (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:1028:404)
at module.exports.mbhs.exports.useContext (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:1033:261)
at Html (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:257:29)
at d (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
at $a (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
at a.b.render (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
at a.b.read (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
at renderToStaticMarkup (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:462)
at renderDocument (/Users/kobrien/dev/nx-5/node_modules/.pnpm/next@9.5.0_react-dom@16.13.1+react@16.13.1/node_modules/next/dist/next-server/server/render.js:3:594)
at renderToHTML (/Users/kobrien/dev/nx-5/node_modules/.pnpm/next@9.5.0_react-dom@16.13.1+react@16.13.1/node_modules/next/dist/next-server/server/render.js:47:72)
Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Z (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:1028:404)
at Object.module.exports.mbhs.exports.useState (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:1034:277)
at Link (/Users/kobrien/dev/nx-5/.next/server/pages/index.js:1975:50)
at d (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
at $a (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
at a.b.render (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
at a.b.read (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
at renderToString (/Users/kobrien/dev/nx-5/node_modules/.pnpm/react-dom@16.13.1_react@16.13.1/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
at Object.renderPage (/Users/kobrien/dev/nx-5/node_modules/.pnpm/next@9.5.0_react-dom@16.13.1+react@16.13.1/node_modules/next/dist/next-server/server/render.js:45:686)
at Function.getInitialProps (/Users/kobrien/dev/nx-5/.next/server/pages/_document.js:222:19)
Move dependency to "next": "9.4.4" in package.json
repeat:
pnpm install
pnpm next build
project works and builds
Expected behavior
pnpm and be used with a minimal next.js app
System information
OS: macos
Version of Next.js: 9.5.0
Version of Node.js: 12.6.3
The text was updated successfully, but these errors were encountered: