Yarn Workspaces seemingly not recognizing directory - npm

Wasn't sure the best verbiage for the title, but basically I have a monorepo setup using yarn workspaces. It works for every other directory I have. Here's my layout to make it easy to visualize
├── root
├── package.json
├── node_modules
├── appsync
│ ├── package.json
├── aurora
│ ├── package.json
├── lambdas
│ ├── lambda-function-1
│ ├── └── package.json
│ ├── lambda-function-2
│ ├── └── package.json
Roughly this is as simple as I can make it without getting into too much unnecessary detail. In my root package.json I have my yarn workspaces setup like so:
"workspaces": {
"packages": [
"./*",
"aurora/*",
"lambdas/**",
]
}
The issue is this:
For every other directory I have. Yarn Workspaces is working perfectly. appsync is covered in the ./* declaration. And I have packages in that package.json that get installed property to the root directory and not in the appsync directory. Same with my lambdas. I define those differently because it wont be covered from the ./* declaration. And this works great too, no issues.
Today I added a new directory, and to my surprise saw modules being installed to aurora and not to the root. So I'm very confused whats wrong with my root package.json thats causing this? Or any ideas I can try to get more information? I have done yarn both at root and in the aurora directory as well, and no matter what I try, it always installs modules to the aurora directory and also adds a yarn.lock file to that directory as well.
Any help is appreciated.

Related

Vue packages version mismatch

I'm trying to deploy my old nuxt project again with new changes but I get this error even tho I removed the node_modules folder, package-lock.json & refreshed the npm cache and of course run npm i after all of this + I don't have neither of these packages in my package.json.
Here's the error I'm getting after running npm run dev:
Vue packages version mismatch:
- vue#3.2.45
- vue-server-renderer#2.7.14
This may cause things to work incorrectly. Make sure to use the same version for both.
here's my package.json:
├── #nuxtjs/axios#5.13.6
├── #nuxtjs/dotenv#1.4.1
├── #nuxtjs/vercel-builder#0.22.1
├── #nuxtjs/vuetify#1.12.3
├── #stripe/stripe-js#1.46.0
├── body-parser#1.20.1
├── cookie-parser#1.4.6
├── cookieparser#0.1.0
├── core-js#3.26.1
├── cors#2.8.5
├── express#4.18.2
├── gsap#npm:#gsap/shockingly#3.11.3
├── nuxt-gsap-module#1.7.2
├── nuxt#2.15.8
├── stripe#8.222.0
├── underscore#1.13.6
└── vuex-persistedstate#4.1.0
I have tried all I can but cannot come up with a solution. Is there anything I could try to make this work?
Please execute this command.
npm install vue#2.7.14 --save

How to use npm workspace

I develop my app by using npm workspace.but I am totally novice to this concept so that I would like to understand npm workspace behavior
.
├── package.json
└── packages
├── a
│ └── package.json
├── b
│ └── package.json
└── c
└── package.json
package.json
{
"workspaces": [
"packages/*"
]
}
My question is
①what happens when I run npm install in root directory ?
All the packages are installed in each repository ? or root directory ?
②npm install in each project is not recommended ?
if someone has opinion, will you please let me know.
Thanks
So long as all packages have the same version of dependencies listed (e.g. thing#1.0.0), then npm install run from the root of your repository will add the dependency into the root node_modules directory.
If one of your packages (e.g. packages/c) has a different version of a dependency (e.g. thing#1.0.1) then that would appear in packages/2/node_modules)
In theory you are using npm workspaces to ensure some consistency across packages, therefore ensuring your versions are consistent will mean node_modules is only ever created in the root of your repository

NPM 7 Workspaces - Multiple node_modules?

I'm having trouble running my app with NPM 7 Workspaces. I am expecting an npm install from the root folder to create a node_modules folder for each of my workspaces, similar to Lerna. However, when I run npm install at the root, I only get one node_modules, at the root level. Is this expected?
Example structure before npm i:
.
├── package.json -> { "workspaces": ["packages/*"] }
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Example structure after npm i (note only one package-lock.json/node_modules):
.
├── package.json -> { "workspaces": ["packages/*"] }
├── **node_modules**
├── **package-lock.json**
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Node version: 16.4.2
NPM version: 7.18.1
Update: After messing around a with a million things, I finally went and deleted the project and recloned it. It worked after this. I believe it was due to the fact that I was on an old node/npm version when I originally cloned the project. Must have been some funky state lingering around there. Anyway hope this helps anyone with the same problem!

CopyWebpackPlugin not copying files when running dev server

what I am trying to achieve
I am trying to synchronise locale files from a yarn workspace to multiple Vue apps in a monorepo so they can be used with i18next in each app. They need to be:
kept in sync during development
automatically updated when the translation files get updated
have them eventually in the dist folder so that they get deployed with the rest of the app (which should happen automatically when the files are in the public folder)
In order to keep the bundle size small, I can't just bundle the whole package - the files need to be copied individually with their original file names and stored in the public folder of each app and the UI library.
the problem
I am trying to configure CopyWebpackPlugin, but I am either
just getting an initial copy from translation/locales to public/locales on starting up the dev server
or the dev server ends up in a loop when I try to enable the writeToDisk option, plus it starts flooding the dist folder with hot reload files.
my vue.config.js *
module.exports = {
devServer: {
writeToDisk: true,
},
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: `${path.dirname(
require.resolve(`#namespace/translations/package.json`)
)}/locales`,
to: "./public/locales",
toType: "dir",
},
],
}),
],
},
*based on instructions from https://webpack.js.org/plugins/copy-webpack-plugin/, it includes a reference to yarn workspaces
running yarn serve with this config results in a loop. The correct files are copied to the ./public folder, but at the same time, it creates the ./dist folder and floods it with ...hot-update.json files.
if I run yarn build the first time, the locale files get copied to the ./public folder, but not to the ./dist folder (so it seems it copies the files at the end of the process, so the latest files aren't included in the ./dist folder
current folder structure
Monorepo
└── packages
├── applications
│ ├── app1
│ │ ├── public
│ │ └── dist
│ ├── app2
│ └── ...
└── common
├── translations
│ └── locales
│ ├── en-GB
│ │ └── common.json
│ └── de-DE
├── ui
└── ...
versions
#vue/cli 4.5.12
webpack#4.46.0
copy-webpack-plugin#6.4.1
Any help with getting this setup to work would be very much appreciated.

How to include *forked* github branch as dependency in package.json

I'm trying to include a fork of https://github.com/segmentio/analytics-react-native
When I include "#segment/analytics-react-native": "^1.1.0", in my package.json
I see the following
├── README.md
├── RNAnalytics.podspec
├── android
├── build
├── ios
├── package.json
└── src
But if I include the fork of the library as "analytics-react-native": "account_name/analytics-react-native#master",, I see
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── RELEASING.md
├── package.json
├── packages
└── tsconfig.json
Of course, build fails with the forked version..
How Can I use the forked version as a dependency?
You want:
"git://github.com/your-account/analytics-react-native.git#branch_name": "^1.1.0"
See the documentation. #commit-ish can be any valid gitref (such as a commit, branch, or tag).
Edit: Ah, per the edit, the repo is a monorepo with the desired package.json a few levels down. This is currently an open request in Yarn. There's a similar request for npm which was closed. There are some good suggestions for compromises in that thread, but there's no one solution to that problem yet.