Trouble while compiling a Nuxt.js project

Glitch Help
1

I’m just trying to create a simple Nuxt.js project, and my pages/index.vue just has Hello World! text

While making my build script nuxt build && nuxt start, I keep getting this error:

ERROR in ./pages/index.vue?vue&type=script&lang=js&

Module not found: Error: Can't resolve '../../rbd/pnpm-volume/ff3877d0-a676-4b0f-8ced-a3a88e9e8c8c/node_modules/.registry.npmjs.org/babel-loader/8.0.5/@babel' in '/app/pages'

 @ ./pages/index.vue?vue&type=script&lang=js& 1:0-449 1:465-468 1:470-916 1:470-916

 @ ./pages/index.vue

 @ ./.nuxt/router.js

 @ ./.nuxt/index.js

 @ ./.nuxt/client.js

 @ multi ./.nuxt/client.js

Any help would be appreciated, thanks!

1 Like
2

Hello! It seems like the tool you’re using to resolve modules can’t find the babel-loader/@babel file that you’re trying to import in app/pages/index.vue.

Do you mind sharing the name of the project so someone here can take a look?

6

Hey! Sure, it’s pikas-pogo-stick iirc. (the only one on my account)

Thanks in advance!

8

Hey, I tried some more things and couldn’t get it to work, mind checking my project out and see if anything went wrong in your end?

14

Hey @ThatNerdyPikachu sorry for the delay on this - I hope to take a closer look at your project today.

15

Sounds good, thanks!

16

Hey @cori any updates? Sorry for bothering you this much!

17

Not yet, and sorry for the delay - I haven’t had a chance to look into it yet.

18

Sounds good, thank you! And it’s fine, I understand how busy it must be at the Glitcn office, hah.

20

Hey @ThatNerdyPikachu we might have a line on this and it seems like it’s a bug around vue, yarn, and babel-loader. I’m assuming that you’re using yarn based on the contents of your project, so correct me if I’m wrong about that. If you are you might take a look at https://github.com/vuejs/vue-cli/issues/2599, which touches on a few common aspects to what you’re seeing here.

Running the suggested solution (yarn add -D babel-loader) in the console for a project remixed from your got rid of the nuxt build error. Some other things popped up and I’m not familiar enough with Nuxt, Vue, and Webpack all together to know off the top of my head where they’re coming from (although I do think you’re missing a } after https://glitch.com/edit/#!/pikas-pogo-stick?path=pages/index.vue:28:0 in your current vue file)

Hope that helps!

22

Hey Cori!

Sadly, running that command resulted in a conflicting of paths with the 2 versions of babel loader… Should I try purging the yarn cache?

23

Certainly worth a try!

24

I’m running into the same issue with an NPM powered Nuxt project. This didn’t occur with earlier versions of Nuxt but can’t seem to get the latest to cooperate on Glitch.

25

Is it actually npm you’re running? We run pnpm 2.x by default, which has a known issue with Nuxt, see Nuxt.js pnpm Issue?

26

Realizing I’m not smart enough to know the difference. :sweat_smile: Here’s a link to the project https://glitch.com/~mousy-search

27

Yeah, it’s running pnpm and it looks like that same issue. You can run enable-npm from the console to switch over to using npm. That will likely resolve this issue, however, then node modules begin to count towards your project space which may become a problem for you. But let us know how you get on.

28

Hey Gareth, thanks for the tip.

This seemed to work but then began to throw the following error:

Cannot find module ‘vue’ from ‘/app’

I realize that isn’t super helpful but if you want to recreate, I’m just trying to create the Nuxt.js “Start from scratch” project here:

(With the latest version of Nuxt)

Cheers,

Lee

29

Hey @leemartin it looks like you’ve renamed the project you were working on. I’d like to look at it in your project if you’re ok sharing the new name.

30

Sorry for the late reply here Cori. Here’s the link: