Fresh Nuxtjs install with yarn doesn't work

Question

I simply create a new nuxt app using (following the documentation):

yarn create nuxt-app appname

Then I switch in to the directory and run (following the documentation):

yarn dev

And get the following error:

 ✖ Nuxt Fatal Error                                                                                                                                                                                                │
   │                                                                                                                                                                                                                     │
   │   Error: @nuxt/components tried to access consola (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.                                                    │
   │                                                                                                                                                                                                                     │
   │   Required package: consola                                                                                                                                                                                         │
   │   Required by: @nuxt/components@virtual:4eff43f3a560be194e6097f872c9d8ed0666b260b73fc7573cd09c38d17c2e2d252932f70636f4f4a6035fee79be6a699b4f9693d4a20ba4eb5c9b359f2413a9#npm:2.1.8 (via                             │
   │   /home/ev/Documents/Projects/firebase-test/f-test/.yarn/__virtual__/@nuxt-components-virtual-7192147023/0/cache/@nuxt-components-npm-2.1.8-189d4bc3ff-b2ab70da20.zip/node_modules/@nuxt/components/dist/)          │
   │                                                                                                                                                                                                                     │
   │   Ancestor breaking the chain: nuxt@npm:2.15.7                                                                                                                                                                      │
   │                                                                                                                                                                                                                     │
   │                                                                                                                                                                                                                     │
   │   Require stack:                                                                                                                                                                                                    │
   │   -                                                                                                                                                                                                                 │
   │   /home/ev/Documents/Projects/firebase-test/f-test/.yarn/__virtual__/@nuxt-components-virtual-7192147023/0/cache/@nuxt-components-npm-2.1.8-189d4bc3ff-b2ab70da20.zip/node_modules/@nuxt/components/dist/index.js

Why is this happening? I am running Node v14.16.0 and yarn v3.0.0 and I am on Linux Mint.

Hi, did you `yarn` in the directory before `yarn dev` to install the dependencies? — kissu, Jul 31 '21 at 13:38
Also, yarn3 is pretty bleedy edge. Do you need it? I'm using v1 or v2, but I don't remember and it's working perfectly fine. — kissu, Jul 31 '21 at 13:39
Hi, yes. Forgot to add that step. I switched to the created project directory. The dev script is executed and Nuxt is attempting to run, thus you can see: Nuxt Fatal Error — Edgars Vilums, Jul 31 '21 at 13:40
About yarn3. Idk, I just tried publishing a Nuxt SSR website to Layer0 or Vercel with npm and it is a glitch and error fest although everything works locally. I thought that maybe changing the package manager would help with deployment *shrug* — Edgars Vilums, Jul 31 '21 at 13:41
Changing the package manager will probably not help no. Do you have a public Github for this one for me to try this out? — kissu, Jul 31 '21 at 13:47
It's simple. Just add @nuxt/firebase and Layer0 and Vercel both die with internal errors. Even if you import firebase manually they both fail. Not compatible with firebase apparently. I will write the support. But this yarn issue is pretty big for Nuxt, effectively it is not installable with yarn v3 + — Edgars Vilums, Jul 31 '21 at 14:08
Wait, you're saying that this is working locally? I guess that the reason is simple: `Layer0` and `Vercel` do not support yarn3. Try downgrading. — kissu, Jul 31 '21 at 14:14
No, that was deployed with npm, I just wanted to test if yarn can get by the issues since Layer0 by default uses the same package manager used locally so I decided to check out yarn. But now I see that with yarn I can't even create a Nuxt app. The state this ecosystem is in is terrible. How can we trust sensitive user data to frameworks that are this unstable and glitchy and not compatible with each other? :) Just a though.. I will try downgrading yarn. For now it seems also impossible, it doesn't downgrade (version stays the same despite set version), I will keep trying. Sad. — Edgars Vilums, Jul 31 '21 at 14:32
I'm pretty sure **nobody** knows about yarn3.0 so far since it was revealed 5 days ago. https://dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07 So, I'm not sure that blaming anybody on not supporting a 5-day old release is a thing at all. Especially when most of the people are still using yarn 1.x (like me). Using `npx create-nuxt-app my-test-app` and selecting `npm` there is still the easiest thing to try for you as of right now. Also, Nuxt is working perfectly fine with latest **stable** tools. There need to be a balance between adoption and stability here. Yarn3 is too new. — kissu, Jul 31 '21 at 14:39
Ok, I didn't see that it was just released. Thank you for your answer. — Edgars Vilums, Jul 31 '21 at 16:11
same issue on node 17.6.0 and yarn 3.2.0 on my local windows machine. `Ancestor breaking the chain: nuxt@npm:2.15.8` — Dollique, Feb 27 '22 at 12:26

score 5 · Answer 1 · answered Jun 29 '22 at 14:09

I might be a bit late to give an answer to the original person who asked but I think I found an answer to the problem.

Here is what I could see after the first build fail using ls -lahA in a terminal:

drwxrwxr-x 2 test test 4,0K 2022-06-29 15:50 components
drwxrwxr-x 7 test test 4,0K 2022-06-29 15:50 .git
drwxrwxr-x 2 test test 4,0K 2022-06-29 15:50 pages
drwxrwxr-x 2 test test 4,0K 2022-06-29 15:50 static
drwxrwxr-x 2 test test 4,0K 2022-06-29 15:50 store
drwxrwxr-x 4 test test 4,0K 2022-06-29 15:50 .yarn
-rw-rw-r-- 1 test test  207 2022-06-29 15:50 .editorconfig
-rw-rw-r-- 1 test test 1,3K 2022-06-29 15:50 .gitignore
-rw-rw-r-- 1 test test 1001 2022-06-29 15:50 nuxt.config.js
-rw-rw-r-- 1 test test  394 2022-06-29 15:50 package.json
-rwxr-xr-x 1 test test 1,1M 2022-06-29 15:50 .pnp.cjs <-----
-rw-r--r-- 1 test test 8,5K 2022-06-29 15:50 .pnp.loader.mjs <-----
-rw-rw-r-- 1 test test 2,8K 2022-06-29 15:50 README.md
-rw-rw-r-- 1 test test 375K 2022-06-29 15:50 yarn.lock

To solve the problem, I deleted the ".pnp.cjs" and ".pnp.loader.mjs" files and added a ".yarnrc.yml" file from an other project. The ".yarnrc.yml" file contains only one line :

nodeLinker: node-modules

then I wrote yarn in a terminal and everything worked, I could use yarn dev again and everything was ok.

I hope it helped. Sorry for my english, it might not be perfect...

this worked perfectly for me. I also found this closed question on nuxt's github https://github.com/nuxt/nuxt/issues/19618 . To add a litle bit more clarification, Nuxt doesn't support Yarn 3's PnP approach so it needs to fall back to the node modules way. — stegnerd, Jun 11 '23 at 19:04

score -1 · Answer 2 · answered Oct 14 '22 at 08:25

-1

for me I simply run npm install then yarn install worked like a charm afterward.

answered Oct 14 '22 at 08:25

SeyT

773
1
10
23

That's because `npm` will add in the node_modules folder. This won't actually make it work with yarn PNP – JdWiebe Oct 31 '22 at 18:01

Fresh Nuxtjs install with yarn doesn't work

2 Answers2