I see that PR https://github.com/vercel/next.js/pull/16614 was closed recently.

Is PR https://github.com/vercel/next.js/pull/16369 expected to fix this issue?

Just to add to data here: We’re running Next on a non-Vercel host, and our app also doesn’t work without use of the --shamefully-hoist.

This issue should probably be reopened, or alternatively another issue cut. It feels like a fairly high-quality bug with easy reproduction and a couple canned projects that show the issue.

This is still very broken… Here’s a minimal reproducible repo https://github.com/looopdotdev/looop-2.1

I override the install command in Vercel like so npm i pnpm -g && pnpm i. (I’ve also simply tried pnpm i, but the build errors)

All works fine with my app, until I add getServerSideProps() {... in one of the page components. As soon as I add that I get a big 500 - internal server error on the deployed page.

https://looop-2-1.vercel.app/

Please help. I’m about to go live with my site and need to simply add some meta data. I really don’t want to have to move away from pnpm or Vercel.

Thanks 🙏

It seems like adding “–shamefully-hoist” in the install command fixes it

EDIT: DOESN’T WORK FOR Next.js 12 Serverless Functions in Vercel

EDIT2: IT WORKS AGAIN FOR Next.js 12.0.3 🎉

I also found an older PR https://github.com/vercel/next.js/pull/8668 where @arcanis fixed Next.js to work with Yarn Plug’n’Play. It is fortunately a pretty small diff. @zkochan I bet these are the exact same places that need to be fixed up to eliminate the incompatibility with PNPM. Maybe this is easy to solve!

From a preliminary investigation, we found that Next.js’s server-renderer bundler is not correctly externalizing modules installed by PNPM. For example, if we compare the file .next\server\pages\index.js between the Yarn vs PNPM branches from @zefexdeveloper’s repro:

For Yarn we will see this:

.next\server\pages\index.js

/***/ "react":
/*!************************!*\
  !*** external "react" ***!
  \************************/

…whereas for PNPM we see this:

.next\server\pages\index.js

/***/ "./node_modules/.pnpm/react@16.13.1/node_modules/react/cjs/react.development.js":
/*!**************************************************************************************!*\
  !*** ./node_modules/.pnpm/react@16.13.1/node_modules/react/cjs/react.development.js ***!
  \**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/** @license React v16.13.1
 * react.development.js

…along with full copies of every NPM dependency, copied inline into every .js file. For example the same is seen in other files .next\server\pages\_document.js, .next\server\pages\_app.js, etc.

As a result, React reports a warning about hooks. The warning is complaining that multiple instances of React are getting loaded (into the Node.js server-side renderer, not the web browser runtime). Next.js seems to be using Webpack to bundle everything, so maybe it is just a configuration problem. Webpack itself certainly is compatible with PNPM.

The webpack configuration is here: packages/next/build/webpack-config.ts

It references packages/next/lib/resolve-request.ts, which looks to be doing custom module resolution. Perhaps it does not handle symlinks correctly according to the Node.js standard.

Thank you @bitfrost for the PR, I hope that @Timer or @timneutkens can merge.

It seems like adding “–shamefully-hoist” in the install command fixes it

Dude, thanks so much. Literally save my bacon!!!