NPM dependency not found, but `npm install` says it's up to date


#1

This is what came up to my screen when I run npm run serve or pnpm run serve

ERROR  Failed to compile with 1 errors                                                                                                    1:42:29 PM

This dependency was not found:
* -!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.registry.npmjs.org/cache-loader/2.0.1/webpack@4.28.4/node_modules/cache-
loader/dist/cjs.js??ref--12-0!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.registry.npmjs.org/babel-loader/8.0.5/@babel!c
ore@7.3.4+webpack@4.28.4/node_modules/babel-loader/lib/index.js!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.registry.npm
js.org/cache-loader/2.0.1/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/n
ode_modules/.registry.npmjs.org/vue-loader/15.7.0/css-loader@1.0.1+webpack@4.28.4/node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?
vue&type=script&lang=js& in ./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save -!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.registry.npmjs.org/cache-lo
ader/2.0.1/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--12-0!../../rbd/pnpm-volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.r
egistry.npmjs.org/babel-loader/8.0.5/@babel!core@7.3.4+webpack@4.28.4/node_modules/babel-loader/lib/index.js!../../rbd/pnpm-volume/4d4af564-a7cb-431b
-abbc-62e9569ed617/node_modules/.registry.npmjs.org/cache-loader/2.0.1/webpack@4.28.4/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../rbd/pnpm-
volume/4d4af564-a7cb-431b-abbc-62e9569ed617/node_modules/.registry.npmjs.org/vue-loader/15.7.0/css-loader@1.0.1+webpack@4.28.4/node_modules/vue-loade
r/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&

I have tried using npm install --save and pnpm install --save it says

A store server is running. All store manipulations are delegated to it.
Performing headless installation
Already up-to-date

I get it, I was missing a dependency, but how do I install it in Glitch?

P.S. Link to my glitch code.


#2

There are 2 ways you can install a dependency on glitch!

The first way is to go to your package.json file, and at the top left, you will see “add package” button, click this and type in the package name you are trying to install, then click on it when it comes up, and it should auto install.

The second way is with the command terminal (console)!

In your console, you can enter the following!

$ pnpm i "package Name" --save

Doing this should also install the package your require.

If none of these work, then please send us a message in this topic, with more information!


MOD EDIT: fixed pnpm command case


#3

Hey @jippy89, @Callum-OKane’s message is accurate, although I’d have expected the dependency to be recognized and installed on its own.

Right now, though, I’m not seeing that error in your logs, and running enable-pnpm in the console of a Remix of your project also doesn’t show the error. What I do see is an error regarding Glitch’s ability to start your project, caused because your package.json’s scripts property doesn’t have a start script specified. Without that, Glitch doesn’t know what to do when your project starts.


#4

Well, I just ran what @Callum-OKane suggest, and it now works.
However be noted it should’ve been
$ pnpm **i** "package name" --save
(yes not capital 'I', also in this case also no **)

Just one thing… How do I check my running server?
This is now what I get when I run my npm run serve,


#5

@cori Ohhhh… I’m sorry I’m new to glitch myself, I didn’t know Glitch needed start script. I just wanted to run vue-cli-serve serve so I can get the usual hot-reloading that Vue CLI 3.x already provide. Are there anyway to get that running like in usual machine?

I tried replacing my serve: vue-cli-serve serve into start: vue-cli-serve but it seems that it makes the console hangs, and the server still haven’t started yet…

How to reproduce my screen above
  1. pnpm i --save-dev cache-loader babel-loader webpack@4.28.4 css-loader vue-loader
  2. Run npm run serve

#6

Hm… weird, after I done the above post, it seems that when I run npm run serve I get the first error again, and it solved by pnpm i <package-name> again…


#7

In a remix I:

  1. ran pnpm i cache-loader
  2. ran pnpm i babel-loader
  3. ran enable-pnpm
    1. after these operations, those two packages were automatically added to my package.json
  4. changed the scripts property in package.json to "start": "vue-cli-service serve"

After all of that the logs look more like I would expect, although I know very little about vue-cli, so I jave no idea if they look like they’re supposed to look or whether the project works as expected. When I view the app I get Invalid Host header, so at least the project’s serving something.


#8

Thanks @cori and @Callum-OKane for helping me out!
Turns out the current problem already out of the topic, now it doesn’t involve Glitch at all…

As mentioned in this issue from Webpack Team, and this issue for setting it up on Vue CLI 3.x
Now, I have configured vue.config.js into…

module.exports = {
  devServer: {
    disableHostCheck: true
  }
};

And now everything works fine when I run pnpm run serve! I will take @Callum-OKane’s answer as true, as it’s the only thing that related to the question. Thanks again guys!