plug and play support

[danielroe]

WIP: nuxt/framework#685

We should allow users to install and use nuxt3 with pnpm and yarn pnp.

• pnpm
• yarn pnp

Reproduction

npx degit "nuxt/starter#v3" nuxt3-pnp

pnpm

Module not found: Error: Can't resolve 'esbuild-loader'
Module not found: Error: Can't resolve 'webpack-hot-middleware/client?reload=true&timeout=30000&path=%2F__webpack_hmr%2Fclient&ansiColors=%7B%7D&overlayStyles=%7B%7D&name=client'
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'unenv'

yarn pnp

[error] Error: Your application tried to access @nuxt/kit, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

[pi0]

@danielroe Can you please share a report of issues we currently have?

[Marvin1003]

node: v16.11.1
yarn: 3.0.2

npx nuxi init nuxt3-app
cd nuxt3-app
yarn set version berry
yarn install
yarn build

throws the following error:

node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/user/Projects/nuxt3-app/.yarn/__virtual__/nuxt3-virtual-e674f51361/0/cache/nuxt3-npm-3.0.0-27235451.ece0e01-3e0c790bfe-b3df0751c7.zip/node_modules/nuxt3/bin/nuxt.mjs not supported.
Instead change the require of /home/user/Projects/nuxt3-app/.yarn/__virtual__/nuxt3-virtual-e674f51361/0/cache/nuxt3-npm-3.0.0-27235451.ece0e01-3e0c790bfe-b3df0751c7.zip/node_modules/nuxt3/bin/nuxt.mjs to a dynamic import() which is available in all CommonJS modules.
    at Function.external_module_.Module._load (/home/user/Projects/nuxt3-app/.pnp.cjs:18896:14) {
  code: 'ERR_REQUIRE_ESM'
}

yarnpkg/berry#638

[LifeIsStrange]

The officiel Vue repository switched to pnpm (it is the fastest package manager), it would be a shame if nuxt didn't support it vuejs/core#4766

[aparajita]

@pi0 Off the bat, most of the imports in nitro are failing. Could be more would fail if I could get those to work without using shamefully-hoist=true in .npmrc.

I first brought up the unfortunate dependency on a flat package structure — an undocumented, internal implementation detail — 2 1/2 years ago. At the time you agreed with me, and said it would eventually get fixed. Fast forward to today, and Evan You has just officially switched to using pnpm in the Vue 3 workflow, so I think the time has come to fix this in Nuxt.

You guys are really, really smart; there must be a way to write code in such a way that you aren't relying either on implicit dependencies or on the dependency tree being flattened.

[aparajita]

@pi0 Example error message:

WARN  [worker] Cannot find package 'unenv' imported from /path/to/project/.nuxt/nitro/index.mjs

[pi0]

Dear @aparajita it is not a one-liner fix nor do we have the same level of packaging complexity that vue itself has. We are no longer using implicit internal dependencies in nuxt3 that was an issue in nuxt 2 but the nitro issue is another problem to be fixed. There is a discussion to keep track of https://github.com/nuxt/framework/discussions/939.

[aparajita]

@pi0 Of course I know it isn't a one line fix. But that is my point: wouldn't it be better to be testing with — and preferably using — pnpm all during the development process, so that there is no need to go back and rework things after release? If a package works with pnpm, it will most certainly work with npm/yarn. Can't say for certain about yarn plug and play.

[pi0]

Of course, it would be the best approach and we are trying to make this happen: nuxt/framework#685. Requirements of yarn pnp and pnpm are almost similar to not depending on node_modules structure. I'm not sure finally we will go with yarn 3 or pnpm for monorepo.

[aparajita]

Since vite and vue-next are using pnpm, wouldn't it seem better to use pnpm for nuxt as well?

[pi0]

We cannot compare concerns of repo maintenance between nuxt and vue :) Considering we have several components which only one of them is vite, edge channel, unbuild, target tests, etc. Finally, for end-users of nuxt, all three options should be available and somehow automatically tested. What we internally choose to maintain monorepo, is not affecting end-users.

[aparajita]

Just read the blog post about yarn 3. Interesting that they repeatedly say they are trying to catch up to pnpm. 😁

[pi0]

Well to be honest besides that currently we use yarn in all of the nuxt repos I have no strong opinions at all about choosing either yarn or pnpm internally.

We just currently have so many other issues to address than spending time to switch monorepo from yarn which is already working to pnpm. But we shall focus on generic pnp compatibility allowing users to use choose between either :)

BTW while this stat is not fair (since we never recommended pnpm for nuxt users) here is July report of nuxt telemetry: (stats will be open soon!)

When we support both yarn and pnpm for nuxt3, we can track to see actually how many users are migrating to pnpm and make decision based on that.

[aparajita]

I am truly amazed at the output of your team. 🙏

[tobiasdiez]

May I ask if there is already a timeline for this feature?

I'm about to start a new project from scratch and would like to use yarn pnp for this and would like to judge if I should wait for a bit or start now without pnp and migrate later to it. So this question is not meant as an annoying "please hurry guys". I do understand that you are working hard on nuxt3!

[FallDownTheSystem]

pnpm now has support for a flat node_modules without symlinks, that might be of interest. https://github.com/pnpm/pnpm/releases/tag/v6.25.0

[av-2024]

Today I figured I'd give Nuxt3 a try after using Next.js for a long time. I use pnpm in my projects. Here's what I am seeing:

Nuxt CLI v3.0.0-27375427.d07d572

  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.0.120:3000/
  > Network:  http://192.168.153.120:3000/
  > Network:  http://192.168.109.2:3000/

ℹ Vite warmed up in 166ms
✔ Vite server built in 329ms
✔ Nitro built in 151 ms

 ERROR  [worker] Cannot find package 'unenv' imported from /path/to/project/.nuxt/nitro/index.mjs
Did you mean to import unenv@0.4.3/node_modules/unenv/runtime/polyfill/fetch.node.cjs?

  Did you mean to import unenv@0.4.3/node_modules/unenv/runtime/polyfill/fetch.node.cjs?
  at new NodeError (node:internal/errors:371:5)
  at packageResolve (node:internal/modules/esm/resolve:884:9)
  at moduleResolve (node:internal/modules/esm/resolve:929:18)
  at defaultResolve (node:internal/modules/esm/resolve:1044:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

Thank you for the work being put into this issue.

[nyxb]

Hey I have now read everything 2 times through, but a solution somehow not seen.

Node v16.14.0
Yarn 3.2.0

npx nuxi init test
cd test
yarn set version stable

➤ YN0000: Retrieving https://repo.yarnpkg.com/3.2.0/packages/yarnpkg-cli/bin/yarn.js ➤ YN0000: Saving the new release in .yarn/releases/yarn-3.2.0.cjs ➤ YN0000: Done in 0s 609ms

yarn install
yarn dev -o

Nuxt CLI v3.0.0-27444434.856c01a
                                                                                                   
  > Local:    http://localhost:3000/
  > Network:  http://192.168.178.77:3000/
  > Network:  http://172.26.208.1:3000/


 ERROR  Your application tried to access @nuxt/kit, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: @nuxt/kit (via "@nuxt\kit")
Required by: C:\Users\vidar\Projekte\24x7dev\test\

Require stack:
- C:\Users\vidar\Projekte\24x7dev\test


  Required package: @nuxt/kit (via "@nuxt\kit")
  Required by:

  Require stack:
  - C:\Users\vidar\Projekte\24x7dev\test
  at Function.require$$0.Module._resolveFilename (.pnp.cjs:16359:13)
  at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  at resolveModule (/C:/Users/vidar/Projekte/24x7dev/test/.yarn/cache/nuxi-edge-npm-3.0.0-27444434.856c01a-08238a568b-7e1ac30169.zip/node_modules/nuxi-edge/dist/chunks/cjs.mjs:19:29)
  at importModule (/C:/Users/vidar/Projekte/24x7dev/test/.yarn/cache/nuxi-edge-npm-3.0.0-27444434.856c01a-08238a568b-7e1ac30169.zip/node_modules/nuxi-edge/dist/chunks/cjs.mjs:32:24)
  at loadKit (/C:/Users/vidar/Projekte/24x7dev/test/.yarn/cache/nuxi-edge-npm-3.0.0-27444434.856c01a-08238a568b-7e1ac30169.zip/node_modules/nuxi-edge/dist/chunks/kit.mjs:137:18)
  at Object.invoke (/C:/Users/vidar/Projekte/24x7dev/test/.yarn/cache/nuxi-edge-npm-3.0.0-27444434.856c01a-08238a568b-7e1ac30169.zip/node_modules/nuxi-edge/dist/chunks/dev.mjs:6717:43)
  at async _main (/C:/Users/vidar/Projekte/24x7dev/test/.yarn/cache/nuxi-edge-npm-3.0.0-27444434.856c01a-08238a568b-7e1ac30169.zip/node_modules/nuxi-edge/dist/chunks/index.mjs:384:7)```

[danielroe]

@VidarDev For now you will need to set the node modules linker in your .yarnrc.yml:

nodeLinker: node-modules

[nyxb]

@VidarDev For now you will need to set the node modules linker in your .yarnrc.yml:

nodeLinker: node-modules

thanks a lot

[pi0]

We are super close to this! Moving to a new issue #14146

[danielroe]

@pi0 Is it worth raising an issue for yarn pnp too?

[zlz9]

The initialization project reported error 500

[danielroe]

@zlz9 That is a completely unrelated issue, but has been resolved in nuxt/framework#8299. For now, you can use a higher version of node to work around it.