How to use override in package.json to update child dependencies - javascript

I am seeing a vulnarability in async and want to update it to 3.2.2
This is the dependency tree if i do npm list async
└─┬ webpack-dev-server#4.8.1
└─┬ portfinder#1.0.28
└── async#2.6.4
So looking at the npmdocs I tried to add override in package.json as follows.
{
"name": "some application",
"scripts": {...},
"dependencies": {...},
"overrides": {
"webpack-dev-server": {
"portfinder": {
"async": "3.2.2"
}
}
},
"devDependencies": {...}
}
But when I do npm install it didn't update async version to 3.2.2 and still shows older version in pacakge-lock.json.
I removed webpack-dev-server package from devDependencies but after running npm install I get empty on npm list async
└── (empty)
Any idea what am i doing wrong?

You need to use NPM version 8.3.0 OR above for "override" to work.
you may check the below github issue for more info,
https://github.com/npm/cli/issues/4232

You've got it backwards ... you specify which dependency you want to override the version of (e.g. async), then provide the version or list of parents and their versions, so it's like this:
"overrides": {
"async": "3.2.2"
},
OR if being specific:
"overrides": {
"async": {
"portfinder": "3.2.2"
}
},

Related

Adding custom functions for Synpress/Cypress Project

I want to add custom functions to a synpress project. (Synpress is a wrapper around Cypress which allows interaction with Metamask). Note there is a question: Cypress custom command is not recognized when invoked but even though I read through this QA, my custom functions are not recognized.
This is my project setup.
synpress_project/
├─ cypress/
│ ├─ e2e/
│ ├─ support/
├─ package-lock.json
├─ package.json
From the answer mentioned before
All the code and referenced modules in index.js are loaded before your
test file. So you need to refer(require) commands.js in your index.js
file
I obeyed to that, inside cypress/support:
commands.js
import "#testing-library/cypress/add-commands";
// add it here, because custom functions need synpress commands as well
import "#synthetixio/synpress/support";
// add custom functions
Cypress.Commands.add("disconnectFromDappify", () => {
cy.disconnectMetamaskWalletFromDapp().should("be.true");
});
index.js
import './commands'
I know that the files are being read, since removing the line import "#synthetixio/synpress/support"; breaks the tests (metamask interaction does not work anymore). However, my function is not available
TypeError: cy.disconnectFromDappify is not a function
package.json
{
"devDependencies": {
"cypress": "^10.0.1"
},
"scripts": {
"test": "env-cmd -f .env npx synpress run -cf synpress.json"
},
"dependencies": {
"#synthetixio/synpress": "^1.2.0",
"env-cmd": "^10.1.0"
}
}
synpress.json
{
"baseUrl": "http://localhost:3000",
"userAgent": "synpress",
"retries": { "runMode": 0, "openMode": 0 },
"integrationFolder": "cypress/e2e/specs",
"screenshotsFolder": "screenshots",
"videosFolder": "videos",
"video": false,
"chromeWebSecurity": true,
"viewportWidth": 1366,
"viewportHeight": 850,
"component": {
"componentFolder": ".",
"testFiles": "**/*spec.{js,jsx,ts,tsx}"
},
"env": {
"coverage": false
},
"defaultCommandTimeout": 30000,
"pageLoadTimeout": 30000,
"requestTimeout": 30000,
"supportFile": "cypress/support/index.js"
}
Try adding a type definition for your custom command.
I would only expect the TypeError is you're using Typescript, but your file extensions say otherwise.
/// <reference types="cypress" />
declare namespace Cypress {
interface Chainable<Subject> {
disconnectFromDappify(): Chainable<any>
}
}
Cypress.Commands.add("disconnectFromDappify", () => {
cy.disconnectMetamaskWalletFromDapp().should("be.true");
});
With help of a colleague, I was able to solve it.
Although, I specified "supportFile": "cypress/support/index.js" inside the synpress.json. It could not find the custom functions.
But if I changed the way the supportFile is called, explicit instead of implicit, it works.
Add --supportFile='cypress/support/index.js' to the end of the command.
"scripts": {
"test": "env-cmd -f .env npx synpress run -cf synpress.json --supportFile='cypress/support/index.js'"
},
Additionally, remove import "#testing-library/cypress/add-commands"; from the commands.js file. (don't know why this is needed, but code breaks, if used, any hints are welcome!)

custom node module's dependency not installed on root

I have a app project and 2 node module projects.
The dependencies structure is something like this:
App {
NodeModule1 {
NodeModule2,
...
},
...
}
The problem I have is that my NodeModule2 instead of being installed on the root of app's node_module App/node_modules/NodeModule2, it is installed in App/node_modules/NodeModule1/node_modules/NodeModule2
This is causing some error on runtime, says my NodeModule2 is not found. My workaround is to add NodeModule2 into App directly, which is not an idea solution.
All other dependencies of NodeModule1 are installed at App/node_modules/.. as expected.
My NodeModule2's package.json
{
"name": "NodeModule2",
"version": "0.0.2-20210202.1.0",
"private": false,
"description": "",
"author": "",
"license": "ISC",
"peerDependencies": {
"react": "16.13.1",
"react-native": "0.59.10",
...
}
}
I HAVE GOT IT
In order for sub node_module to be appeared on the root level, all its peerDependenciess' versions must be matched with App's.
In my case both of my App and NodeModule1 has dependency of react-native-picker-select but with different versions.
App {
dependency: {
"react-native-picker-select": "^8.0.0"
}
}
NodeModule1 {
dependency: {
"react-native-picker-select": "8.0.0"
}
}
NodeModule2 {
peerDependency: {
"react-native-picker-select": "8.0.0"
}
}
In this case, App received 8.0.4 and NodeModule1 received 8.0.0.
Yarn puts NodeModule2 under NodeModule1 and to shared the same dependency version 8.0.0.
Fix: Make sure all versions are matched in App, NodeModule1, and NodeModule2.

Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths

Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths.
Please update your configuration.
I found this exact question here: setupTestFrameworkScriptFile is not supported error
I renamed my jest.config.js to setUpTests.js however that did not remove the deprecated error warning.
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
package.json scripts
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
}
"#types/enzyme": "^3.1.15",
"#types/jest": "^23.3.13",
"jest": "^24.1.0"
Jest used to have a config option called setupTestFrameworkScriptFile...
...but it was deprecated in favor of the newer setupFilesAfterEnv in PR #7119 which shipped with version 24.0.0.
Since you are using Jest ^v24.1.0 you will need to use setupFilesAfterEnv.
Just find where setupTestFrameworkScriptFile is used in your Jest config, rename it to setupFilesAfterEnv, and put the single file it used to point to in an array and you should be good to go.
Example, change this jest.config.js:
module.exports = {
...
setupTestFrameworkScriptFile: './setup.js',
...
}
...to this:
module.exports = {
...
setupFilesAfterEnv: ['./setup.js'],
...
}
If you are using create-react-app, change the key name at package.json file
from
"jest": {
// ...
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
to
"jest": {
// ...
"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
After I changed my file name from setupTests.js to setup.tests.js it worked. Maybe the dir path name did not match. Make sure you check that!
In my case in 'jest.config.js' I had
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']
correctly referencing 'setup-jest.ts' in <rootDir>.
After renaming the file itself and the reference to it from
setup-jest.ts
to
setupJest.js
the error message vanished. Weird. Seems as if the hyphen in the file-name or being the same as in 'node_modules.jest-reset-angular.setup-jest.js' was the culprit.
Using Angular 13 and Jest (in package.json):
"jest": "^28.1.0",
"jest-preset-angular": "^12.1.0",
I'm on Lubuntu 22.04.
Jest message is not mantained anymore: https://github.com/mattphillips/jest-expect-message/issues
So I suggest using:
const msg = '... my message...'
expect({msg, result}).toEqual({msg, result: expected})
From https://github.com/facebook/jest/issues/3293
Or alternatively
function expectToBeTrue(result: any, message: string){
return expect({message, result}).toBe({message, result: true})
}
expectToBeTrue(compute() == 1, "Oh no compute should return 1!")

Meteor + LitElement (Polymer 3) issue with importing

I had an issue with importing the LitElement module into a Meteor project:
I'm starting a new test project with Meteor 1.7+ and am using LitElement for a few components.
I installed Meteor like so:
meteor create meteor-lithtml --release 1.7.1-beta.29 --bare
I installed like so:
meteor npm install --save #polymer/lit-element
My node_modules directory looks like so:
My package.json file:
{
"name": "myapp",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.56",
"#polymer/lit-element": "^0.5.2",
"#vaadin/router": "^1.0.0",
"meteor-node-stubs": "^0.4.1",
"redux": "^4.0.0"
},
"meteor": {
"mainModule": {
"client": "client/index.js",
"server": "server/index.js"
}
}
}
The typical way I see lit-element imported is not working...
Just adding an index.js file and importing the lit-element module generates errors. If I remove the import from the index.js file, the errors go away.
\\ client\index.js
import { LitElement, html } from '#polymer/lit-element';
The very first error:
Uncaught SyntaxError: Unexpected token {
modules.js?hash=182125a3fa97eaa24f6d313584ca593c3aed2103:984
Points to this location:
Expanding node_modules to look into this file:
Why am I getting the unexpected { token?
NOTE: I'm asking this question here just in case a Meteor user stumbles by with the same issue and needs help.
Just in case we have any more Meteor users stop by with an issue like this, here are the references to the explanation & solution:
explanation: https://forums.meteor.com/t/litelement-import-litelement-html/45042/8?u=aadams
solution: https://github.com/aadamsx/meteor-lithtml/pull/1

How to install a "pre-release" version using npm or bower?

I would like to download via npm or bower dojo version 1.11.0-pre.
At the moment I am using the following package.json file but npm is not able to find the dependencies.
How to solve this issue and load dojo 1.11.0-pre?
{
"dependencies": {
"dojo": "1.11.0-pre"
}
}
EDIT
{
"dependencies": {
"dojo": "https://github.com/dojo/dojo.git#a275e8237cd8be0a4e3af4d229853f317bc56873"
},
"description": "fe",
"name": "fe",
"version": "0.0.0"
}
It's possible use github as dependence:
{
"dependencies": {
"dojo": "https://github.com/dojo/dojo.git#a275e8237cd8be0a4e3af4d229853f317bc56873"
}
https://docs.npmjs.com/files/package.json#github-urls

Categories

Resources