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

pnpm support without --shamefully-hoist #14146

Closed
pi0 opened this issue Jun 10, 2022 · 51 comments
Closed

pnpm support without --shamefully-hoist #14146

pi0 opened this issue Jun 10, 2022 · 51 comments

Comments

@pi0
Copy link
Member

pi0 commented Jun 10, 2022

Update: Since v3.0 release, pnpm without shamefully-hoist flag works out of the box but there are still known issues to be addressed (in nuxt or upstream):

  • When pages enabled, vue-router dependency is implicit
  • Multiple instances of vue are can be resolved and used
  • Generated tyeps are not fully functional without hoisted node_modules

History: #11823

We have progressively improved plug-and-play support over time and almost all underlying packages including nitro support and are tested against pnpm.

Last step is making nuxt 3 working with pnpm out of the box before migrating modules and templates from first-class yarn to pnpm.

Using pnpm without --shamefully-hoist is possible today 🥳 but requires explicitly installing vue and ufo dependencies and we don't want this since Nuxt was always a zero-config package and we need to add deps of all nuxt modules as well this way.

One obvious solution is that same as Nitro, we internally (also for unimport ~> unjs/unimport#69) resolve them to their full path but we also need to support non-resolved implicit imports in templates as modules might have similar implicit dependencies in their scope and they need to be resolved as well. I think this can be done using a custom resolver for vite (and webpack).

@jpsc
Copy link
Contributor

jpsc commented Jun 15, 2022

It would be nice if fixing this also fixes for pnpm workspaces which it doesn't, even with --shamefully-hoist .
We have another issue for workspaces that is probably closer to the issue.

@asonnleitner
Copy link

It would be nice if fixing this also fixes for pnpm workspaces which it doesn't, even with --shamefully-hoist .
We have another issue for workspaces that is probably closer to the issue.

I have a fully functional monorepo using pnpm workspaces, including cached docker build layers and deployment into k8s. Just by using --shamefully-hoist

@jpsc
Copy link
Contributor

jpsc commented Jun 17, 2022

@asonnleitner I'm assuming that's not anywhere public? I've tried multiple times when on rc.1. I would love to check and compare it.

@asonnleitner
Copy link

@jpsc yeah, it's private, but if you could make a simple example monorepo, I could take a look at it over the next week and check what's causing the troubles

@YannicEl
Copy link
Contributor

@jpsc there are two ways i have found to use pnpm workspaces with nuxt3

  1. Have a .npmrc file with shared-workspace-lockfile=false in your root folder and a .npmrc file with shamefully-hoist=true in your nuxt subfolder. I use that approche here: https://github.com/YannicEl/try-finger/tree/dev

  2. Have a .npmrc file with shamefully-hoist=true in your root folder. I use that approche here: https://github.com/YannicEl/hans

@amery
Copy link

amery commented Jun 18, 2022

I have an skeleton monorepo at https://gitlab.com/licensly/licensly/-/tree/shamefully-hoist. without shamefully-hoist I have to manually add jiti, typescript, ufo and vue to each package

and despite that nuxt generate fails with (undefinedms) (ReferenceError: Response is not defined) https://github.com/nuxt/framework/discussions/5471. it only works with shamefully-hoist enabled.

to make it worse nuxt dev doesn't work at all on fresh projects using pnpm anymore. #14173

@jpsc
Copy link
Contributor

jpsc commented Jun 18, 2022

@jpsc there are two ways i have found to use pnpm workspaces with nuxt3

1. Have a `.npmrc` file with `shared-workspace-lockfile=false` in your root folder and a `.npmrc` file with `shamefully-hoist=true` in your nuxt subfolder.  I use that approche here: https://github.com/YannicEl/try-finger/tree/dev

This option works if you go into each directory and do pnpm install but that kinda defeats doing a single install at once.

2. Have a `.npmrc` file with `shamefully-hoist=true` in your root folder. I use that approche here: https://github.com/YannicEl/hans

This option seems counter-intuitive to force all packages to behave like that because of a limitation.

@asonnleitner, if by any chance you have the time I've created a minimal reproducible repo here.

Much appreciated!

@asonnleitner
Copy link

@jpsc Hi, made a PR in your repo, so you can check, also the fork is available on my profile here nuxt3-pnpm-monorepo

@bluwy
Copy link
Contributor

bluwy commented Aug 24, 2022

Besides needing to install vue and ufo. I also needed to install node-fetch-native to fix the (undefinedms) (ReferenceError: Response is not defined) error in generate, and update .npmrc with:

public-hoist-pattern[]=@vue/*

To fix some useSSRContext errors in dev/generate/build.

error logs
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
  at _sfc_main.setup (./.nuxt/dist/server/server.mjs:15281:16)  
  at callWithErrorHandling (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
  at setupStatefulComponent (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7084:29)  
  at setupComponent (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/@vue+runtime-core@3.2.37/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7039:11)  
  at renderComponentVNode (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
  at renderToString (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/@vue+server-renderer@3.2.37_vue@3.2.37/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:446:26)  
  at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:469:24)  
  at Object.renderToString (/Users/bjorn/Work/oss/whyframe/node_modules/.pnpm/vue-bundle-renderer@0.4.2/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
  at async ./.nuxt/dev/index.mjs:516:21  
  at async ./.nuxt/dev/index.mjs:106:22

@bmulholland
Copy link
Contributor

I read through the associated issues, but couldn't understand the current status of yarn PnP support. Does the work enabling pnpm without hoisting also enable Yarn's PnP feature? Meaning Yarn Berry Plug 'n' Play isn't currently supported, but is being (indirectly) worked on.

@amery
Copy link

amery commented Oct 21, 2022

I read through the associated issues, but couldn't understand the current status of yarn PnP support. Does the work enabling pnpm without hoisting also enable Yarn's PnP feature? Meaning Yarn Berry Plug 'n' Play isn't currently supported, but is being (indirectly) worked on.

rc.11 still doesn't work without shamefully-hoist=true on .npmrc for pnpm workspaces at least

@manniL
Copy link
Member

manniL commented Oct 21, 2022

Should be resolved with rc.12 via nuxt/framework#7895

Nope, my bad. Still WIP ☺️

@manniL manniL closed this as completed Oct 21, 2022
@manniL manniL reopened this Oct 21, 2022
@amery
Copy link

amery commented Oct 21, 2022

I just created a sample project, just nuxi init, moved into a subproject and set srcDir. it got rc12. can't find vue.

https://github.com/amery/nuxt3-5411

$ git clone github.com/amery/nuxt3-5411
$ cd nuxt3-5411/apps/nuxt-app
$ pnpm i
$ pnpm serve
Nuxt 3.0.0-rc.12 with Nitro 0.6.0

  > Local:    http://localhost:3000/ 
  > Network:  http://172.17.0.2:3000/

 WARN  Failed to resolve dependency: vue, present in 'optimizeDeps.include'

 ERROR  The following dependencies are imported but could not be resolved:

  vue (imported by /home/amery/projects/xxx/nuxt3-5411/node_modules/.pnpm/nuxt@3.0.0-rc.12/node_modules/nuxt/dist/app/entry.mjs)

Are they installed?

ℹ Vite client warmed up in 112ms
✔ Nitro built in 944 ms

@manniL
Copy link
Member

manniL commented Oct 21, 2022

Yup, as I wrote, still work in progress - my bad ☺️

@amery
Copy link

amery commented Oct 21, 2022

Yup, as I wrote, still work in progress - my bad

yes, but I thought a proper test case was useful to add 😝

@manniL
Copy link
Member

manniL commented Oct 22, 2022

It definitely is 😋

@bmulholland
Copy link
Contributor

Glad to see there's movement on this. I didn't get an answer to my question, though, and I don't want it to be lost: when this issue is closed, will Yarn Berry PnP support work too? If not, is there a separate place that is being tracked? I couldn't find one; they've all been closed in favour of this issue, which doesn't mention yarn at all.

@danielroe
Copy link
Member

danielroe commented Oct 17, 2023

Nuxt should now be working without --shamefully-hoist. It currently requires explicitly installing vue and vue-router as these are needed to be optimised by Vite, and therefore they must be top level deps.

If you are encountering any issues, please raise a new issue with a reproduction.

Note that some modules may have their own issues and please do raise issues with them specifically (though feel free to point them to me if needed).

(Finally, this may also mean you may need to install more dependencies explicitly in large projects.)

@crunchwrap89
Copy link

crunchwrap89 commented Oct 18, 2023 via email

@dsvgl
Copy link

dsvgl commented Oct 18, 2023

It currently requires explicitly installing vue and vue-router

Is this the new recommended way? This should be in the docs then...
Currently the installation page says under "Install the dependencies" for pnpm: Make sure you have shamefully-hoist=truein.npmrc before running pnpm install

@akiot-b
Copy link

akiot-b commented Oct 18, 2023

I'm wondering if "shamefully-hoist=false" is recommended, but I can confirm that I was able to run it with "false" for now. (@nuxt/content gave me a dependency warning, but that's another issue.)

@hlassiege
Copy link

huge news. Thanks a lot

@paro-paro
Copy link

Amazing!! Big thanks!

@cexbrayat
Copy link
Contributor

cexbrayat commented Oct 18, 2023

@nuxtjs/i18n still requires to add quite a few depencies explicitely if you try to remove --shamefully-hoist.

I opened nuxt-modules/i18n#2506 to track it for those of you who are interested.

@gyhyfj
Copy link

gyhyfj commented Oct 20, 2023

Modules such as @nuxtjs/tailwindcss and @element-plus/nuxt will throw error with pnpm without --shamefully-hoist
Nuxt 3.8.0 with Nitro 2.7.0:

[18:40:22]  ERROR  Failed to resolve import "tailwindcss/tailwind.css" from "virtual:nuxt:D:\xxx\.nuxt\css.mjs". Does the file exist?


[18:40:22]  ERROR  Failed to resolve import "element-plus" from "virtual:nuxt:D:\xxx\.nuxt\element-plus-injection.plugin.mjs". Does the file exist?

and then lead to crush:

ℹ Vite client warmed up in 22803ms                                                                                                             18:47:38
✔ Nitro built in 18164 ms                                                                                                                nitro 18:47:46
[Vue Router warn]: No match found for location with path "/_nuxt/tailwindcss/tailwind.css"
[Vue Router warn]: No match found for location with path "/_nuxt/tailwindcss/tailwind.css"
[Vue Router warn]: No match found for location with path "/_nuxt/tailwindcss/tailwind.css"
[Vue Router warn]: No match found for location with path "/_nuxt/tailwindcss/tailwind.css"

[18:48:04]  ERROR  Failed to resolve import "tailwindcss/tailwind.css" from "virtual:nuxt:D:\xxx\apps\dalle-nuxt3\.nuxt\css.mjs". Does the file exist?


[18:48:04]  ERROR  Internal server error: Failed to resolve import "tailwindcss/tailwind.css" from "virtual:nuxt:D:\xxx\apps\dalle-nuxt3\.nuxt\css.mjs". Does the file exist?
  Plugin: vite:import-analysis
  File: virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/css.mjs:1:9
  1  |  import "tailwindcss/tailwind.css";
     |          ^
  2  |  import "@/assets/css/global.css";
      at formatError (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
      at TransformContext.error (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
      at normalizeUrl (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
      at async Promise.all (index 0)
      at async TransformContext.transform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
      at async file:///D:/xxx/node_modules/.pnpm/vite-plugin-inspect@0.7.40_@nuxt+kit@3.8.0_vite@4.5.0/node_modules/vite-plugin-inspect/dist/index.mjs:922:19
      at async Object.transform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
      at async loadAndTransform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29)

[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/css.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/css.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/css.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/css.mjs"

[18:48:04]  ERROR  Internal server error: Failed to resolve import "element-plus" from "virtual:nuxt:D:\xxx\apps\dalle-nuxt3\.nuxt\element-plus-injection.plugin.mjs". Does the file exist?
  Plugin: vite:import-analysis
  File: virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/element-plus-injection.plugin.mjs:2:35
  1  |  import { defineNuxtPlugin } from '#app';
  2  |  import { ID_INJECTION_KEY } from 'element-plus';
     |                                    ^
  3  |
  4  |  export default /* #__PURE__ */ defineNuxtPlugin(nuxtApp => {
      at formatError (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
      at TransformContext.error (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
      at normalizeUrl (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
      at async Promise.all (index 1)
      at async TransformContext.transform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
      at async file:///D:/xxx/node_modules/.pnpm/vite-plugin-inspect@0.7.40_@nuxt+kit@3.8.0_vite@4.5.0/node_modules/vite-plugin-inspect/dist/index.mjs:922:19
      at async Object.transform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
      at async loadAndTransform (file:///D:/xxx/node_modules/.pnpm/vite@4.5.0_@types+node@20.5.1_sass@1.69.4/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29)

[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/element-plus-injection.plugin.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/element-plus-injection.plugin.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/element-plus-injection.plugin.mjs"
[Vue Router warn]: No match found for location with path "/_nuxt/@id/virtual:nuxt:D:/xxx/apps/dalle-nuxt3/.nuxt/element-plus-injection.plugin.mjs"

Is there any solution for that?

@manniL
Copy link
Member

manniL commented Oct 20, 2023

@gyhyfj This was mentioned in Daniel's comment above #14146 (comment)

Note that some modules may have their own issues and please do raise issues with them specifically (though feel free to point them to me if needed).

@P4sca1
Copy link
Contributor

P4sca1 commented Dec 17, 2023

@nuxt/content issue for pnpm compatibility:
nuxt/content#2381

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

No branches or pull requests