How can i update dependencies of a forked npm scoped package - npm

I would like to update the dependencies of this deprecated npm package: #asseinfo/react-kanban. It was a devDependency of react 16 || 17 and my project is using react 18 (many other packages depend on v18 as well).
The package is not mine so i forked it and i have been struggling to publish it as my own package.
All i did was:
fork the repo on github
edit the devDependecies for react 18
run npm publish
If i keep the name as a scoped package "#asseinfo/react-kanban" i get a package not found error, naturally.
If i rename it to a non scoped package like "my-reatc-kanban", the project code gets messed up and importing the library in my project causes "module not found" errors everywhere.
My question is simple, how can i simply update the devDependencies and keep the fork untouched besides for the devDependecies and publish it as my own npm package?

Related

Do published packages take priority over workspaces when running npm install?

I have a monorepo project and I'm migrating to npm#7. Before npm workspaces, I had to publish packages to a private feed and then consume them in my app (I didn't bother with npm link shenanigans). Not ideal, but I made do.
Then npm introduced workspaces, and now I'm trying to migrate. While resolving peer dependency conflicts, I noticed that when I made changes to any package.json files, npm install would return the same errors unless I updated package versions to something that hadn't been published yet. I wasn't expecting this kind of behavior.
So how does npm determine where to search for a package first? Does npm install download packages from the registry before looking at workspaces? Is this intentional, and if so, why?

How to link a globally installed node package to a project with yarn?

I have just started using yarn and I can't figure out how to link a globally installed package to a project. With npm I would just run npm link <package-name> but it doesn't work with yarn.
when I run yarn link <package-name> it gives this error:
yarn link v1.22.4
error No registered package found called "express".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
The link functionality is not really meant for linking global packages to a project. It is meant to link a package that you are working on to another project that you are working on. The fact, that the npm link command can be used to link globally installed packages to the current project is just an implementation detail of npm. From the yarn docs:
For the vast majority of packages it is considered a bad practice to have global dependencies because they are implicit. It is much better to add all of your dependencies locally so that they are explicit and anyone else using your project gets the same set of dependencies.
So you should just add the dependencies via yarn add <package-name>.

differences of dependencies and devDependencies

I'm new to nodejs and npm, just a question on dependencies and devDependencies
When I create a new react or Angular project, then I added a new required package by
npm install xxx --save
so the command above add the new package entry to "dependencies" in package.json file.
then I run npm start. The project is working OK and it is using the package I just installed.
But when I run npm start, I'm still in development environment, isn't it? and if the entry is not added to devDependencies, how can the application still run in development? I'm confused
The difference between these two, is that devDependencies are modules which are only required during development, while dependencies are modules which are also required at runtime. So while development we use both of them. For more details check here.

Structuring and publishing a Vue component to NPM

I'm trying to publish my Vue component(s) to NPM but I'm running into some issues.
I followed these instructions: https://www.xiegerts.com/post/creating-vue-component-library-structure/
My structure is as follows:
The package is published here: https://www.npmjs.com/package/bootstrap-vue-formgenerator
Now, when I install my package using NPM and try to use it, it cannot find it. Webstorm also underlines the name of the package telling me the module has not been installed.
What am I doing wrong here?

How to prevent nested node_modules inside node_modules

I've created my own npm package, let's call it XYZ, it has #material-ui dependency in it's package.json file.
When I install it in project A I have nested node_modules inside of XYZ folder(so it's A\node_modules\XYZ\node_modules\#material-ui), but when I install it in project B I don't have nested node_modules folder. Both project A and B has #material-ui in their package.json files with same versions.
How to force my XYZ package to use #material-ui from A\node_modules?
There are upside of having less nested folders and downside having more folders in node_modules folder directly and version control problems.
Use correct npm version
Correct yarn and npm (ie: npm v3) should not have such structure issue. It should always flatten the whole structure where possible and only have nested node_modules if the versions are incompatible with the one at top.
Check versions
So if you have it working properly on one project and not on another, its probably due to version. Check out if the #material-ui is same version on both. Maybe two different packages are conflicting with each other at some point.
Check how you are installing them
From your question, it says it's same version. However, you did not mention how you installed your package on both project. If you install with yarn link or npm link it should install dependencies properly as expected.
Check if you are using different packages
If you check the package, recently material-ui has been deprecated, and the notice says to upgrade to #material-ui/core instead. It might be some packages inside that folder is not same. Either way, it's like this whenever there is some dependency conflict. Check inside the #material-ui folder.
Flatten them manually (dangerous)
There are several packages to forcefully resolve this issue. They will go thru the nested node_modules folders and flatten them into single folder.
flatten-packages
Install with, npm install -g flatten-packages.
Run executable flatten-packages to rearrange all packages in node_modules folder in the project directory.
Flatten will delete older version of a package. You should take care of version breaking changes related errors.
You can use npm dedupe command to accomplish this.
You can put the command in postinstall script in package.json, and every time NPM installs package, the npm dedupe command will flatten all the duplicated packages in same version for you.
For more information, see https://docs.npmjs.com/cli/dedupe
npm postinstall script
I had the same issue in a React Native app with my NPM package.
The problem was that in project A the version of React Native used was (0.59.5) below the version used in my package (0.59.8).
Installing the package in a brand new project (B), of course was using the latest version of React Native in that moment, that was the same of my package (0.59.8).
I have another addition to the accepted answer:
Clear Local node_modules folder Cache
rm -rf node_modules
Handle with care: Sometimes migrating projects to new npm modules can cause weird cache issues inside a node_modules folder, especially those that have been around for a while, or happened to have newer versions of packages installed in sub-dependencies that differed from the installed version in root.
Once you remove direct dependencies via the package.json dependencies, the packages will be removed from the <root>/node_modules. This can cause a bug where the new modules are still nested under your dependency instead of being moved to root as expected.
So by wiping out your local node_modules, you can do a clean reinstall and let the flattening to its work.