Due to clients/coworkers wish I have to switch to npm. The Project was created using Vue CLI and Yarn as default Package Manager.
I first thought no big deal, so I deleted node_modules folder and yarn.lock file. Then I ran npm install and then npm run serve.
It works and compiles like normal, recompiles when I change a file, all good so far but here is the weird part: the changes do not reflect in the browser. I have to refresh the page manually.
I tried to look into config files for vue or webpack. But there are none. No Webpack config, no vue cli config, no build folder.
What I have is:
- .eslintrc.js
- .browserlistrc
- babel.config.js
- postcss.config.js
I dont know what else to look for? Anyone any idea what this might be?
Thanks a lot,
-J
What was the cause in my case(I have Linux OS):
It seems that the value of: max_user_watches
in the /proc/sys/fs/inotify/max_user_watches
is affecting webpack => which is interfering with hot reloading.
To check your actual value
$cat /proc/sys/fs/inotify/max_user_watches
16384
16384 was in my case and it still wasn't enough.
So you will need to increase your value as well.
SOLUTION if you have Linux OS:
Create the file:
sudo nano /etc/sysctl.d/90-override.conf
And populate it with:
fs.inotify.max_user_watches=200000
It seems 200000 is enough for me, you can have a higher value if you want.
After you create the file and add the value, just restart the PC and you should be ok.
Vue CLI depends on #vue/cli-service which acts exactly like Facebook's Create React App (react-scripts).
If you are familiar with create-react-app, #vue/cli-service is roughly
the equivalent of react-scripts, although the feature set is
different.
https://cli.vuejs.org/guide/#cli-service
So what both of them do is "simplify" configuration of the project for you by hiding all the bundling configs (e.g. webpack.config.js) under the carpet. Which is handy in most cases, unless you decide to do something fancy (like switch package manager). In Create React App one can bail out from this behavior by running yarn eject or npm run eject, but on Vue CLI platform you are locked in. So there's no straightforward way to make all underlying config files to appear and fix the faulty bits in them.
To be contunued?..
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
I am working in a very restricted environment, which means I do not have any access to internet. I setup everything in order to import an Angular Template Project and install all the packages from an offline cache. I followed these steps:
On the online machine
configure yarn-offline-mirror with pruning to false (directory X)
create a new angular app with ng new foo --skipInstall=true
install the packages with yarn (install) in order to generate a yarn.lock and to store all the tgz-packages in directory X
delete node_modules
Whenever I need more packages, I use npm-package-downloader with the argument -d to download all the dependencies as tgz-files too and copy them to directory X
On my offline machine
I import the tgz-files from directory X and put them in the same location
I configure yarn-offline-mirror like on my online machine
I Import the angular template and install the needed packages with yarn clean cache followed by yarn --offline
As long all the tgz-packages are on my offline machine, this works like a charm (because of yarn.lock).
My Problem
I want to add further packages on my offline machine. The packages are present in the offline mirror, because I copied them onto the machine. When I run
yarn clean cache
yarn add <absolute-path-to-tgz-package> --offline
two possible scenarios arise:
The package has no dependencies, in which case it works as intended
The package has dependencies: in this case, follwing error gets thrown for each "missing" dependency (package-name and package-version are placeholders):
Couldn't find any versions for "package-name" that matches
"package-version" in our cache. This is usually caused by a missing
entry in the lockfile, running Yarn without the --offline flag may
help fix the issue.
As far as I understand, yarn needs somehow to know, which dependencies a package requires. But it has to know, otherwise it couldn't throw this specific error. So my question is, how can I force yarn to look for dependencies in directory X too? The packages are there, since I download them with the respective dependencies. And obviously I am not supposed to manually edit yarn.lock. The docs for yarn add do not list such an option (as a matter of fact, it does not even list the --offline flag)
Through npm, is there anyway possible we can get webpack to reflect javascript changes on the fly, when lite-server is running? I have to do a npm run build every single time I have JavaScript changes.
Lite-server is doing an excellent job in updating my css changes on the fly whenever I save my .scss files. But in regards to webpack and the JavaScript files, its another story.
Thanks for any tips
Webpack has a watch mode.
You can either call webpack with --watch or put watch: true in your webpack config. This will keep it running and recompile if something changes.
Also consider to look into webpack-dev-server
I am using aurelia skeleton-es2016. Gulp watch takes at least 2 minutes. I have a dual-core 2.8Ghz amd with 6gb ram.
I initially had issues with missing modules after npm install but fixed those. Not sure if that is relevant to this case.
Also I'm not very experienced with gulp. Are the files being served from the the dist folder? Are those the files being watched by browser-sync for changes? I tried making a change to the index.html page and the change was not reflected in the browser without a reload. Is that file not among the ones watched?
It´s unusual that gulp watch needs so much time.
You should try to reinstall all npm and jspm packages.
If you have problems deleting the npm_modules folder you can try the tool I use in this case: Unlocker.
The files watched by browserSync are in your root folder .. You can see that under skeleton-es2016\build\tasks\serve.js this serve task is used by the watch task.
Or in your console where you are running gulp watch: [BS] Serving files from: .
If you used the newest skeleton-es2016 you should also have a browserSync control App running under http://localhost:3001/
BrowserSync will not detect changes inside your index.html file. That´s because of the watch task configuration:
only files under "src" will be watched.
You can see this configuration under: skeleton-es2016\build\paths.js and skeleton-es2016\build\tasks\watch.js