NPM 7 Workspaces - Multiple node_modules? - npm

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!

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 access local images in Electron app with Vue

I have an Electron app that uses Vue for its UI. The app downloads compressed data files from a server. The files contain compressed HTML. The app decompresses and display the HTML. That's all working fine.
The HTML may contain img tags that reference images that are also compressed in the downloaded file. I extract and decompress these images, but then need to a) put them somewhere that the app can see them, and b) construct an img tag that correctly references these images.
Rather than list the dozens of places I've tried to put these images, suffice to say that no matter where I put the images, I don't seem to be able to access them from the app. I get a 404 error, and usually a message saying the app can't reference local resources.
Any suggestions for where the app should store these images, and then how to reference them from img tags?
I have a related problem with images I could reference from the Web, but would prefer to download and cache locally so that the app can display them when there's no internet connection. I feel like if I can solve one of these problems, I can solve them both.
this below setting(s) works for me...
.
├── dist
│ ├── css
│ │ └── app.6cb8b97a.css
│ ├── img
│ │ └── icon.1ba2ae71.png
│ ├── index.html
│ └── js
│ ├── app.08f128b0.js
│ ├── app.08f128b0.js.map
│ ├── chunk-vendors.e396765f.js
│ └── chunk-vendors.e396765f.js.map
├── electron.js
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── components
│ ├── _breakpoint.scss
│ └── RoundList.vue
├── img
│ ├── bullet.svg
│ └── icon.png
└── index.js
vue.config.js:
const path = require("path");
module.exports = {
outputDir: path.resolve(__dirname, "./basic_app/dist"),
publicPath: './'
};
part of package.json
"scripts": {
"build:vue": "vue-cli-service build",
"serve:electron": "electron .",
"serve": "concurrently \"yarn build:vue\" \"yarn serve:electron\"",
"build:electron": ""
},
the output: https://i.stack.imgur.com/nKK7y.png

Force include node_modules in package?

I want to npm publish my dist dir that looks like this:
dist
├── README.md
├── node_modules
│   └── clap
│   └── dist
│   └── es
│   ├── index.js
│   └── index.js.map
├── package.json
...
└── utils
├── memory-stream.js
├── memory-stream.js.map
├── mysql-users.js
├── mysql-users.js.map
├── sql.js
├── sql.js.map
├── utils.js
└── utils.js.map
Notice how there's a node_modules dir in there. I want to publish that along with everything else.
The files in there are compiled, but they're part of a local package not distributed on npm, so I do want it bundled.
My code references it like this:
var index = require('../node_modules/clap/dist/es/index.js');
So it should work perfectly fine.
The problem is that it looks like npm publish has it hardcoded to ignore directories called node_modules. Is there any way to override that behaviour?

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.

grunt-karma ^2.0.0 does NOT use karma#0.13.x and it breaks

When installing grunt-karma npm install grunt-karma --save-dev it install karma^1.0.0 with it. And that breaks the tests:
Warning: .then() only accepts functions but was passed: [object Undefined], [object Undefined]...
It's true that while installing grunt-karma I get the following npm WARN message:
npm WARN peerDependencies The peer dependency grunt#>=0.4.x included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#^0.13.0 || >= 0.14.0-rc.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing fsevents#1.0.12
But my npm version is 2.14.20
This is what gets installed:
grunt#1.0.1 node_modules\grunt
├── grunt-known-options#1.1.0
├── path-is-absolute#1.0.0
├── eventemitter2#0.4.14
├── rimraf#2.2.8
├── exit#0.1.2
├── nopt#3.0.6 (abbrev#1.0.9)
├── iconv-lite#0.4.13
├── coffee-script#1.10.0
├── glob#7.0.5 (fs.realpath#1.0.0, inherits#2.0.1, inflight#1.0.5, once#1.3.3)
├── minimatch#3.0.2 (brace-expansion#1.1.5)
├── findup-sync#0.3.0 (glob#5.0.15)
├── grunt-cli#1.2.0 (resolve#1.1.7)
├── js-yaml#3.5.5 (esprima#2.7.2, argparse#1.0.7)
├── dateformat#1.0.12 (get-stdin#4.0.1, meow#3.7.0)
├── grunt-legacy-log#1.0.0 (hooker#0.2.3, colors#1.1.2, underscore.string#3.2.3, lodash#3.10.1, grunt-legacy-log-utils#1.0.0)
└── grunt-legacy-util#1.0.0 (getobject#0.1.0, async#1.5.2, hooker#0.2.3, which#1.2.10, underscore.string#3.2.3, lodash#4.3.0)
karma#1.0.0 node_modules\karma <-- here is the issue
├── graceful-fs#4.1.4
├── di#0.0.1
├── rimraf#2.5.2
├── mime#1.3.4
├── qjobs#1.1.4
├── colors#1.1.2
├── source-map#0.5.6
├── http-proxy#1.14.0 (eventemitter3#1.2.0, requires-port#1.0.0)
├── isbinaryfile#3.0.0
├── dom-serialize#2.2.1 (custom-event#1.0.0, void-elements#2.0.1, extend#3.0.0, ent#2.2.0)
├── glob#7.0.5 (path-is-absolute#1.0.0, fs.realpath#1.0.0, inherits#2.0.1, inflight#1.0.5, once#1.3.3)
├── minimatch#3.0.2 (brace-expansion#1.1.5)
├── useragent#2.1.9 (lru-cache#2.2.4)
├── tmp#0.0.28 (os-tmpdir#1.0.1)
├── bluebird#3.4.1
├── connect#3.4.1 (utils-merge#1.0.0, parseurl#1.3.1, debug#2.2.0, finalhandler#0.4.1)
├── optimist#0.6.1 (wordwrap#0.0.3, minimist#0.0.10)
├── body-parser#1.15.2 (content-type#1.0.2, bytes#2.4.0, depd#1.1.0, qs#6.2.0, raw-body#2.1.7, on-finished#2.3.0, http-errors#1.5.0, debug#2.2.0, iconv-lite#0.4.13, type-is#1.6.13)
├── expand-braces#0.1.2 (array-unique#0.2.1, array-slice#0.2.3, braces#0.1.5)
├── chokidar#1.6.0 (path-is-absolute#1.0.0, inherits#2.0.1, glob-parent#2.0.0, async-each#1.0.0, is-binary-path#1.0.1, is-glob#2.0.1, readdirp#2.0.1, anymatch#1.3.0)
├── socket.io#1.4.8 (has-binary#0.1.7, debug#2.2.0, socket.io-parser#2.2.6, socket.io-adapter#0.4.0, engine.io#1.6.11, socket.io-client#1.4.8)
├── log4js#0.6.37 (semver#4.3.6, readable-stream#1.0.34)
├── lodash#3.10.1
├── combine-lists#1.0.0 (lodash#4.13.1)
└── core-js#2.4.0
grunt-karma#2.0.0 node_modules\grunt-karma
└── lodash#3.10.1
The solution is simply install the the version that grunt-karma needs according to the docs:
This current version uses karma`#0.13.x ...
Although it the tables it seems to depend of different versions of karma for devDependencies(1.x || ^0.13.0) and peerDependencies(^0.13.0 || >= 0.14.0-rc.0)
So, to fix it you have to manually install the right version of karma until the issue is fixed:
npm install karma#0.13.22