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.
Related
Question:
When I run npm run build with the configuration below, rollup.js is unable to resolve the dependency (import) and displays the following message below. Is there any way to make rollup happy while also referencing the Typescript declaration file?
Message from rollup:
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
pdfjs-dist/types/web/ui_utils (imported by index.ts)
Here is my index.ts:
import { RendererType } from 'pdfjs-dist/types/web/ui_utils'
const renderType = RendererType.CANVAS;
My package.json:
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "rollup --config"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#rollup/plugin-node-resolve": "^13.2.1",
"#rollup/plugin-typescript": "^8.3.2",
"pdfjs-dist": "^2.13.216",
"rollup": "^2.70.2",
"typescript": "^4.6.4"
}
}
My rollup.config.js:
import typescript from '#rollup/plugin-typescript';
import { nodeResolve } from '#rollup/plugin-node-resolve';
export default [
{
input: 'index.ts',
output: {
format: 'es',
file: 'index.js'
},
plugins: [
typescript(),
nodeResolve({ browser: true })
]
}
]
Here are the exact steps to reproduce the error above:
Create an empty folder and then run npm -y init
Run the following command:
npm install typescript pdfjs-dist rollup #rollup/plugin-node-resolve #rollup/plugin-typescript --save-dev
Add "build": "rollup --config" to your package.json
Create the rollup.config.js file shown above
Run npm run build in the terminal
More background:
Now, I should point out that the file pdfjs-dist/types/web/ui_utils is a typescript declaration file (ui_utils.d.ts). The actual js file is in pdfjs-dist/lib/web.
If I copy the typescript declaration file so that it is located in the same directory as the js file, dependency resolution works. However, since I will be writing a wrapper around pdf js, I would have to do this for every typescript declaration file which is very tedious and upgrading would also become an issue.
So another way to word the question would be how to resolve a module *.d.ts when the js file is located in another directory?
I came up with the following solution to the problem.
Create a d.ts with the following and name it the same as the module name (ui_utils.d.ts in my case)
declare module 'pdfjs-dist/lib/web/ui_utils' {
export * from 'pdfjs-dist/types/web/ui_utils'
}
Using the above, now I can reference the actual location of the module and Typescript will pick up the declarations as well.
import { RendererType } from 'pdfjs-dist/lib/web/ui_utils'
Side note: When using rollup, you may also need to use #rollup/plugin-commonjs to be able to resolve dependencies.
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"
}
},
Meteor version 1.7.0.5
Using meteortesting:mocha
I have a very simple meteor react app. I added a test file in imports/startup/simple-schema.tests.js
describe('Todos_item', function () {
console.log('Todo');
});
I was running npm run test-app so it should be logged in console but that file actually doesn't run. But when I added this snippet to my tests/main.js Todo is logged in console. So am I missing something.
My directory tree
package.json
{
"name": "meteor-bootstrap",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"meteor-node-stubs": "^0.4.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.3"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
},
"engines": {
"node": "8.11.4"
}
}
Any help will be greatly appreciated. Thanks in advance.
New Meteor apps since 1.7 have eager loading turned off by default (which is causing your problem)
The behaviour is controlled by the meteor section in your package.json.
To restore the eager loading behaviour for tests, delete the testModule key-value pair from your package.json. It should look like this:
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
}
},
If you want to restore pre-1.7 behaviour for all files, just delete the whole meteor section from package.json
If you don't want to use eager loading, you will need to import all of your test files from the tests/main.js file
Also one thing to add when with #Fred answer importing test files have to use require not import though I am not sure is it due to my node version or not I am using my node version v6.11.1
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
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