Having to create a .nuxt folder every time I compile my app - vue.js

Every time I run npm run dev(that's how my team set up that project) I get this error:
ERROR EEXIST: file already exists, mkdir 'X:......\my-project\.nuxt'
I then need to do mkdir .nuxt and try again. Usually it works, sometimes it doesn't: it keeps asking me that everytime I run npm run dev and after 5 or 10 times it works. Sometimes I won't work no matter how many times I try, so I restart my machine and then it works.
Any idea what's going on?

I have had issues of this kind when running in the past with gulp in parallel tasks that would delete and write to the same deleted directory. But, without having more information about this, and just knowing that sometimes the .nuxt directory is missing. I can't really get to the root of the problem. It might be something related with the nuxt.config.js
This is the only solution that I see for now.
Even though this might not fix the original issue what you could do to at least be able to develop without having to worry any longer is:
Add the rimraf package and run it always before running the dev command.
Add the mkdirp package and run it after the deletion of the folder happen
If you add the commands globally now you should have in your terminal both commands available and you can run
rimraf ./.nuxt && mkdirp .nuxt && npm run dev
This would be the least intrusive approach as it wouldn't affect any of your team members.
If also they are affected by this you can also add this packages as a devDependency and add another npm run dev command as shown here.
{
...
"scripts": {
"dev": "rimraf ./.nuxt && mkdirp .nuxt && npm run dev"
}
...
}

Related

What causes the npm error {errno: -4094, code: 'UNKNOWN', syscall: 'readlink'}?

I have been happily building a next.js app over the last couple days without error. Today I installed the firebase npm and suddenly I am getting a strange error when I try to run "npm run dev?
ready - started server on 0.0.0.0:3002, url: http://localhost:3002
[Error: UNKNOWN: unknown error, readlink 'C:\...\seo-site\.next\server\pages\_document.js'] {
errno: -4094,
code: 'UNKNOWN',
syscall: 'readlink',
path: 'C:\\...\\seo-site\\.next\\server\\pages\\_document.js'
}
Even if I uninstall firebase and roll the entire project back to a working build I still get the same error. If I try to run this "broken" build on another computer with the same version of node and npm it runs completely fine. I've tried running npm cache clean --force and npm install -g npm#latest --force several times without any luck.
I have noticed that as I change things I get the error with a different path. Sometimes it's \webpack-runtime.js sometimes its \errors.js and somethimes it's \pages\_document.js'
I cant find anything online or on stack overflow for an error matching this errno or syscall. Has anyone experienced this before or know what is causing this?
deleting the .next file and running npm run dev fixed the issue. I am not sure why this worked but I think it has something to do with next.js trying to use parts of a previous build when you make updates that are causing errors. deleting folder forces next to rebuild everything again.
I tried to go back directories from command line and then reentered into the workplace directory and tried npm run dev. Worked for me.
Right-click the project folder and from the menu choose "Open in integrated Terminal". Then try to run "npm run dev". If it still doesn't work, go back one folder with the command "cd .." and then go back again to the project folder with "cd project folder name". Try running "npm run dev". It worked for me on both occasions. Hope this helps.
Solved by restarting VS Code 🤔
Error occurred seemingly out of nowhere, when restarting the local server with 'npm run dev'. Just doing minor CSS changes to a component in the Nextjs project.

How to execute nested "npm run commands" inside an npm#^7.0.0 monorepo set up within the context of the current workspace?

I have a monorepo with several workspaces within it. It has been very common for me to use chained npm scripts for simple tasks instead of using a task runner. So for example, the following configuration (pseudo code) is very common for me and usefull as well, specially for pre and post build scripts
"scripts": {
"prebuild:task1":"task1 --task1-arguments",
"prebuild:task2":"task2 --task2-arguments",
"prebuild": "npm run prebuild:task1 && npm run prebuild:task2",
"build":"build-script --build-arguments",
}
So the above is the package.json for the child worskpace itself and then in the master package.json I have the call to the script that triggers the build for that workspace.
build:packageA: "npm run build -w packageA"
All seems working well but the chained "npm run script" inside the workspace is actually execute in the context of the master monorepo and not inside that particular workspace.
So, in summary, the first call is to run the build script in the workscape and then triggers the prebuild script of that workspace BUT as that script execute chained npm run scripts those are run in the context of the master repo which happens that they don't exist in there. So the callstack might be ...
(master) build:packageA
(packageA) prebuild
(master) npm run prebuild:task1 >>>> EXIT ERROR
The only way I found, up to now, to bypass this issue was to make my child workspace a monorepo itself holding zero woskpaces. Essentially I have a "workspaces" key in its package.json pointing to the root directory. This enables me to use the -w flag in the scripts section so to refer all scripts to itself. So my current workaround looks like this ...
"workspaces": ["."],
"scripts": {
"prebuild:task1":"task1 --task1-arguments",
"prebuild:task2":"task2 --task2-arguments",
"prebuild": "npm run prebuild:task1 -w packageA && npm run prebuild:task2 -w packageA",
"build":"build-script --build-arguments -w packageA"
}
Isn't there already a better way to solve this?
Thanks in advance to everyone!
Following this post https://stackoverflow.com/a/67060676 I found out that npm changed the way it calls nested scripts in workspaces.
I ran into similar issues like you while running npm#7.5, but the feature was introduced in npm#7.7. Updating node to v17 and npm to 8.3 resulted in everything is running as intended.
In my case I wanted to execute nested npm run build commands in workspaces.

Error when I try to execute 'sanity start' after success with 'sanity init'

I am trying to install the Sanity studio and I followed these steps:
npm install --global #sanity/cli
sanity install
sanity init
After the init step, I try to run the next step:
sanity start
but it says:
Run the command again within a Sanity project directory, where "#sanity/core"
is installed as a dependency.
at D.runCommand (F:/All Node and related projects/node_modules/#sanity/cli/b
in/sanity-cli.js:3254:1345)
at t.exports (F:/All Node and related projects/node_modules/#sanity/cli/bin/sanity-cli.js:1794:2419)
But when I try to cd into my sanity project directory, it is not even able to recognize sanity, it says:
'sanity' is not recognized as an internal or external command,
operable program or batch file.
Is my dependencies directory structure incorrect?
What conditions should be met before you can call sanity start?
THANKS!
I ran into a similar problem wen trying to initialize Sanity. I tried all the above which didn't work form me. As advised above I would run
npm install -g #sanity/cli
then:
sanity init
And I would get the following error:
sanity : The term 'sanity' is not recognized as the name of a cmdlet
The solution I found to this was running the following instead:
npx #sanity/cli init
npx #sanity/cli start
This worked for me like a charm!
The reason why sanity start not working is your command prompt location not same as you installed all sanity packages.
Go back to commend prompt go to the location where sanity is installed and give the commend sanity start it will work .
usually, sanity is set in "studio" directory. In root we install
npm i #sanity/client
and then create "studio" directory in root. cd into "studio"
cd studio
and inside "studio" directory
sanity init
This will initialize sanity project inside "studio" directory
If you open the package.json inside "studio", you should have those scripts:
"scripts": {
"start": "sanity start",
"build": "sanity build"
},
Since you are running sanity start in root level, in root package.json file, "start": "sanity start" does not exist that is why you are getting error
To start the sanity server, everytime you should cd studio and then sanity start. Technically you will have two terminals: one for main project development server and second one is for the sanity server
When you run sanity init , it creates a folder for the project (you can choose e-commerce, blog, or no template). cd into that folder that got created and then you can run sanity start
If you can't find where that folder is, you can just create a new one. Sanity is already installed, so you can just go ahead with sanity init
If you're using it with a front end framework, go into the root directory of your project, run the command there, then cd into the created folder then start sanity.
just cd into sanity folder by writing cd sanity and then sanity start
Same issue happened with me then I rechecked whether I'm in the right directory and noticed that I was in the backend directory, then I cd.. and got into the right frontend directory and ran 'npm run dev' and guess what it compiled successfully. So make sure that you are in the right directory.
I encountered this problem sometime, all I did was cd into my sanity folder then run ~ npm install ~ and that solved it for me

Patching a NPM package locally with patch-package, not working

I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)
So basically :
I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
I did npm install patch-package --save-dev
Then I ran npx patch-package vue-youtube
It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications
BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".
What am I missing here ? I feel like I have followed eveything in the patch-package npm page..
Thanks
EDIT : Still investigating.. few more informations/questions :
my patch name is patches/vue-youtube+1.4.0.patch
when i run npm ls vue-youtube it returns just one element : vue-youtube#1.4.0
in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?
EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube.
If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)
WORKING SOLUTION :
If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.
Adding below npm script in package.json after patching worked for me.
scripts: {
"prepare": "patch-package",
}
The lines from yarn documentation explains about prepare
For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.
After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.
I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...
To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:
$ npm install
$ npm run <name of the script that generates the dist folder>
No need to run npx patch-package nor postinstall step.
I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).
CAVEAT: You will have to run npm install and npm run every time you make an update to the package.
To test changes and be able to share it among team members (when the package is on Github)
Make a fork of the package you want to modify.
Make all the changes you want to your forked version of the package.
Run the following to automatically update the package.json file to make the dependency point to your forked version:
$ npm install <github's user name>/<package's name of the forked repository>#<branch name> --save-prod
For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:
$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod
Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.
Take a look at this answer, it may help.
https://stackoverflow.com/a/71153240/9981565
For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json

Executing npm link from a common folder

I use custom built library and then link them between other libraries using 'npm link'. One problem is that,
if I do 'npm install' the links disappear and then I will have to go manually and do the linking.
In order to solve this issue, I am thinking of building a script to do npm link across libraries wherever needed but I am not sure if that will work because we will have to do npm link on the exact path from command line instead of running from a common path from command line.
Example:
I have built a library called, #mycustomlib/ui-components and I use them in other projects.
In order for me to use it, I would have to do the link in the appropriate project folder else I wouldnt be able to import.
Any npm link you've set up will be overwritten when you npm install.
One option to avoid having to relink every time you npm install might be to create a new script in package.json like this:
"scripts": {
"install-local": "npm install && npm link #mycustomlib/ui-components"
}
Then just run npm run install-local.