The target entry-point "#vcd/ui-components" has missing dependencies: - node.js

I'm getting the following error when I npm start the application at https://github.com/juanmendes/vmware-cloud-director-ui-components for the branch named ryan-a11y-merge-to-master. If I run the master branch, I get no errors.
ERROR in The target entry-point "#vcd/ui-components" has missing dependencies:
- #angular/core
- #clr/angular
- #angular/common
- rxjs/internal-compatibility
- #angular/platform-browser
- #angular/core/testing
- #angular/forms
- #angular/router
- rxjs
- rxjs/operators
- #clr/angular/data/datagrid/interfaces/filter.interface
I also see the following error messages before this final error:
Warning: Entry point '#vmw/ng-live-docs' contains deep imports into '/Users/jmendes/git/github/juan-core-ui/node_modules/prismjs/components/prism-scss', '/Users/jmendes/git/github/juan-core-ui/node_modules/prismjs/components/prism-typescript'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point '#vmw/plain-js-live-docs' contains deep imports into '/Users/jmendes/git/github/juan-core-ui/node_modules/lit-html/directives/unsafe-html'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point '#vcd/ui-components' contains deep imports into '/Users/jmendes/git/github/juan-core-ui/node_modules/#clr/angular/data/datagrid/interfaces/filter.interface'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
If I ask colleagues to clone that repo and run it:
git clone https://github.com/juanmendes/vmware-cloud-director-ui-components.git
cd vmware-cloud-director-ui-components;
git checkout ryan-a11y-merge-to-master;
npm ci;
npm start;
They have been able to run the application (and also get the warnings) without a problem but I get the error above and get the following message at localhost:4200: Cannot GET /
What I have tried
Deleted node_modules and the dist folder
npm cache clean
npm unlink #angular/core (both steps in the package folder and the project including it)
npm unlink #vcd/ui-components (both steps)
Completely removing node, npm, nmv and reinstalling them
Workaround
If I disable Ivy compilation, then it complains because one of the packages it uses (#vmw/live-docs), doesn't declare entryComponents for some dynamically created components (since they are not needed in Ivy compilation).
To get past that problem, I modified the code in #vmw/live-docs to have entryComponents and re-built it, copying its dist folder to node_modules in my current application. This allows me to run the app in non Ivy mode, which is not what I want
What else can I try ?
I am out of things to try, any suggestions are welcome.

This was happening because I somehow had a ~/node_modules/#vcd/ui-components with stale references.
It seems that node module resolution was going up the tree and trying to use that version instead of the one I had configured in ~/github/vmware-cloud-director-ui-components/tsconfig.json
"compilerOptions": {
"paths": {
"#vcd/ui-components": [
"../../dist/components"
]
}
},
Deleting that node_modules folder fixed my problem

Related

Merge has caused error saying I'm attempting to import runtime.js outside of src when the file structure hasn't changed

All of the questions I have seen asked are people deliberately trying to import files from outside of their project. But I have done a merge from one branch to another which has caused no folder structure change and I am getting the error
Compiled with problems:X
ERROR in ./src/App.jsx 1:40-132
Module not found: Error: You attempted to import /Users/johnsmith/Documents/projects/prism/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
As you can see from the screenshot below my folder/file structure hasn't changed since doing npx create-react-app.
1: import './App.css';
Why am I getting this issue and are there any commands I can do to fix it?
The way I fixed this was by installing react-refresh. Then doing npm ls react-refresh to see what version was being used across the project. So then because the project/react-scripts etc was using 0.11.0 I had to change react-refresh from "react-refresh": "^0.13.0", to "react-refresh": "^0.11.0", in package.json, delete node_modules and package-lock.json, npm install then after that it all started working again.
Same problem here. There must be something wrong with react-refresh version 0.13.0
We temporally fixed this forcing to install the 0.11.0 version:
npm i -D react-refresh#0.11.0

WebpackOptionsValidationError: configuration plugins[12] misses the property apply

I recently upgraded my project from vuetify 1.5 to 2.1.. I also updated the required dependencies and installed fibers, deepmerge, sass, sass-loader in devdependencies.
Now when I run "yarn serve" it throws following error.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
at webpack (/home/usman/projects/project-crm/frontend/node_modules/webpack/lib/webpack.js:31:9)
at serve (/home/usman/projects/project-crm/frontend/node_modules/#vue/cli-service/lib/commands/serve.js:137:22)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Command failed with exit code 1.
I don't have a clue where is this error occuring. I searched on internet but didn't found solution on
this error...
configuration.plugins[12] misses the property 'apply'.
OK people!!!
I've found a solution(trick). Off course it is a trick the way I see it but it is working absolutely fine to me. Remember this error happened to me due to upgrade from vuetify 1.5 to 2.1....
Steps I took were,
Created a new project(name = candy) with latest Vue and Vuetify.
Installed all dependencies and devDependencies in this new project(candy in my case) which I had in my original projects package.json file.
You can open package.json file of your original project and terminal in new project(candy) and run commands yarn add "package name in original project or npm install "package name.
Then copied this(candy) package.json file and pasted it in my original project folder and renamed these files and folder to old.
File & folder == node_modules to node_modules_old, package.json to package_old.json, vue.config.js to vue.config_old.js, yarn.lock to yarn_old.lock.
Copy only package.json of candy project to the original project's folder.
Run command yarn install or npm install.
And the server runs now.
Further, you will have to set your code according to the project. It can be in vue.config.js mostly or in babel config file or webpack.config.js.

npm audit not recognising issues resolved at lower level

I'm having an issue with resolving a warning highlighted by npm audit. I followed the path to the dependent package which had the issue and ran the suggested fix command to update the dependency package that was causing the issue.
The path looks like this: npm/node_modules/npm-profile/node_modules/make-fetch-happen
Now when I run npm audit in the make-fetch-happen folder there are no errors, and the same happens with npm-profile and npm. But when I go back up one level to the package containing npm the audit still highlights the original issue as though it hasn't been resolved.
I am new to using npm so I'm not sure how the file structure works or what effect it has running commands like this at different levels of the file structure.
Is there a command I can run to make the higher level package acknowledge the fix that was run at the lower level?
Sometimes this bug occurs because the package-lock.json is buggy. If you look for the leveraged library within your package-lock. You should see it by searching for the package name and look to see if there are any with an outdated version number. Chances are there will be. I found being on npm#6.1 deleting both the node_modules and the lock file and npm installing fixed the issue. But sometimes it may not work.

React-Native Packager Failure: Duplicate module name

This happened seemingly randomly during development. When trying to run npm start or react-native run-ios, I get the following error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/chandlervdw/Repos/Relay/mobile/node_modules/react-native/local-cli/rnpm/core/test/fixtures/files/package.json collides with /Users/chandlervdw/Repos/Relay/mobile/node_modules/react-native/Libraries/Animated/release/package.json
This error is caused by a #providesModule declaration with the same name accross two different files.
Error: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/chandlervdw/Repos/Relay/mobile/node_modules/react-native/local-cli/rnpm/core/test/fixtures/files/package.json collides with /Users/chandlervdw/Repos/Relay/mobile/node_modules/react-native/Libraries/Animated/release/package.json
This error is caused by a #providesModule declaration with the same name accross two different files.
at HasteMap._updateHasteMap (/Users/chandlervdw/Repos/Relay/mobile/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:162:15)
at /Users/chandlervdw/Repos/Relay/mobile/node_modules/node-haste/lib/DependencyGraph/HasteMap.js:140:25
Strangely, /Users/chandlervdw/Repos/Relay/mobile/node_modules/react-native/local-cli/rnpm/core/test/fixtures/files/package.json actually does list react-native-vector-icons as the name for the module???
If I delete that file, the error no longer happens but the packager gets stuck at 93% and complains about a completely irrelevent library not being found.
I blew away my repo and even reinstalled everything, including npm, rnpm, and even upgrading node. I'm running the same versions of everything as my teammates, who are able to run the packager without issues.
Posting this as an answer just in case anybody else has this issue in future.
Running npm start with sudo permissions grants the correct privileges when nodes package manager is running the initial build phase. This only seems to happen if the shell/user that you are running from has restricted privileges. Force escalating privileges to sudo gives the package manager full control to complete the build.
I was getting errors like
Failed to build DependencyGraph: #providesModule naming collision:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: accepts
Duplicate module name: accepts
I solved it by deleting npm's cache .npm and rerunning packager with --reset-cache
rm -rf ~/.npm
sudo or chown did not fix it for me. I get the same error from the same library, very odd:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/collumj/research/k9fresh/ios/build/Build/Products/Debug-iphonesimulator/kisharNine.app/package.json collides with /Users/collumj/research/k9fresh/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
No need for sudo when I encounter this.
Warning: destructive, check in first.
rm -rf android ios
git reset --hard
npm start
This fixes it every time. RN 0.39.2
edit: later, I think I fixed this by unlinking the react-native-vector-icons lib; I think the instructions I got made me double up on the linking or were out of date somehow.
After cleaning the nvm cache and reinstalling all node_modules I realized I was having this issue because of react-native-router-flux.
I fixed it with a downgrade from react-native-router-flux#3.38.1 to react-native-router-flux#3.38.0
More details here:
https://github.com/aksonov/react-native-router-flux/issues/1816

Using fs.extra copyRecursive gives a "TypeError: forEachAsync is not a function" error and I can't fix it

My code is :
http://pastebin.com/rCy4wSUK
As soon as this function is called by router it prints
"done copying contents of clean base into temp" and then error which is here:
http://pastebin.com/UxEu4PaS
So at least it is not giving an error in copying but what is causing it to throw this error.
Sounds like the fs.extra module has not installed completely and is missing a dependency. Your code runs fine for me with a fresh npm install fs.extra q
Remove your node_modules folder and re-run npm install (if your dependencies are listed in package.json) or npm install fs.extra q (if they are not).
I've seen this issue on case-insensitive filesystems in projects that require different versions of walk that depend on forEachAsync#2.x and foreachasync#3.x. Because the casing but not name of foreachasync changed across versions, it seems like it might be confusing npm and not properly installing the right versions.
I was able to fix this in our project by explicitly depending on foreachasync#^3.0.0.

Resources