I am working on a React project and using Webpack to compile the code. This project contains a lot of common components which is installed in other projects across the organisation using npm install private git repository.
Package.json of other project looks like this:
"@mypackage/my-package-name": "git+ssh://git@github.com:git-handle/git-repo.git",
And in Webpack config I am compiling it by excluding it from node modules and it works fine.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules(?!\/@mypackage))/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['@babel/react'],
},
},
],
},
],
},
Now when I want to update the code of common component from the global package I have to reinstall the whole package to check the changes.
One workaround for that is to edit the node_modules but then I have to redo those changes to my global package and again do the reinstalling process at the end ( also it doesn't keep the git history to track what changes needs to be done ).
I have came across npm install from local and npm link local folder answer but facing the same issue which is not resolved
Updated package.json
"@mypackage/my-package-name": "file:../my-package-name"
I got the following errors
Module not found: Can't resolve '@mypackage/my-package-name/Navbar' in 'path/to/folder/'
SassError: File to import not found or unreadable: bootstrap/variables
Module not found: Error: Can't resolve 'js-cookie'
These errors are may due to an incomplete compilation of code from local folder.
My folder structure is something like this
= (my-package)
- package.json
- ...
= src
- index.js
= (other-project)
- package.json
- ...
= src
- index.js
I am looking for a solution by which I can point the package to a local folder( mypackage global folder ) and synchronize the changes in both the projects.
