Webpack loading wrong version of Node Module for Angular project - node.js

I have a project in Angular 13. I want to use quillJS and I want to add tables so I tried to install quill-better-table in my project.
For some reason the package is not working. I used the web inspector and found this to be the issue:
ERROR TypeError: quill.keyboard.bindings.Backspace is undefined
The problem seems to be located at: quill_better_table_BetterTable quill-better-table.js:2979 and when I check the debugger I can see the line:
let thisBinding = quill.keyboard.bindings['Backspace'].pop();
quill.keyboard.bindings['Backspace'].splice(0, 1, thisBinding); // add Matchers to match and render quill-better-table for initialization
// or pasting
I found a github repo that had this issue fixed:
https://github.com/LosEcher/quill-better-table
The problem I'm running into is I dont know how to get that particular repo into my project. I have tried updating the current package and webpack continues to load the old one. I've tried clearing the npm cache and reinstalling the node packages.
I found this guide: https://whatapalaver.co.uk/npm-dependency which seems to indicate what I should do but I'm not quite npm literate enough to figure it out. Specifically, I dont know that I understand how to create the NPM link.
I'm looking for advice as to how to fix this package. I am going to be reading up on NPM link but I figured if there was another easier way to get this fixed then I would ask. I can load that repo into my node module folder, but I dont know how to make webpack reload the updated module.
Thanks in advance for the help, let me know what details I for got to add.

Related

Where should I install dependencies of linked package?

I've been doing a lot of React projects which use the same components. I came to know about npm link recently, and I thought I could use it for code sharing locally.
So, I isolated some React components (calling 'A') in a directory and made a link by 'npm link' command and also 'npm link {package name}' in my projects to use it. I wrote some dependencies which 'A' depends on like styled-components and React in peerDependencies.
Basically, what I thought was the packages which 'A' depends on
doesn't need to be installed in 'A', but installed in main project which actually uses the source code, so I put them in peerDependencies. However, when I build the main project with webpack, it gives errors like
Module not found: Error: Can't resolve 'react/jsx-runtime'
Module not found: Error: Can't resolve 'react
Module not found: Error: Can't resolve 'styled-components'
I installed those modules in 'A' to figure it out, and it built successfully, but also invoked another error something like another copy of react, so I got lost after that.
I want to know what I am doing wrong and how to fix this. A little bit of hint would be much appreciated.

Fork node_module react and install not working

I tried to fork this react native module to make some corrections, because the author abandoned the project and he was the only tool I found and meets my need, so reading an article I found out about the fork, I did this procedure, then I cloned and did necessary correction, only when having to add the module to my react project with the
yarn add lucassouza16/react-native-svg-uri
I get this error:
error Couldn't find the binary git
I'm new to this forking function, is there anything else I need to do?
My bifurcated repository:
https://github.com/lucassouza16/react-native-svg-uri
Original repository:
https://github.com/vault-development/react-native-svg-uri
To add it via npm or yarn you will need to add this firstly to npm registry. Here you have more information about it https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry
You can also add via github doing like this:
yarn add git+https://github.com/lucassouza16/react-native-svg-uri.git
You can read more about it here:
How to install an npm package from GitHub directly?
In the end all responses resulted in the same error, yet thanks to everyone who tried to help me, but it worked when I added the release version, this is the correct format:
yarn add lucassouza16/react-native-svg-uri#1.2 .4

angular project npm modules randomly deleted

I have the weirdest problem I've ever seen with npm where in the middle of running an angular ng serve, packages from both node and for angular will randomly go missing. In the middle of a save, the project will suddenly not recompile, and will complain about a missing module. Each time it has been different but so far I have had:
Error: ENOENT: no such file or directory, open '.../node_modules/core-js/internals/hidden-keys.js'
Module not found: Error: Can't resolve '../internals/is-pure' in '/.../node_modules/#angular-devkit/build-angular/node_modules/core-js/internals'
An unhandled exception occurred: Cannot find module './internal/streams/stream
An unhandled exception occurred: Cannot find module '/.../node_modules/minipass-collect/node_modules/minipass/index.js'.
Please verify that the package.json has a valid "main" entry
These have just been errors from the last few days, but issues like this has been happening all. to the point where I need to delete node_modules and reinstall everything via npm at least once a day. I'm thinking the error has more to do with node or NPM than with my Angular set up, as some of these missing packages appear to be node core packages.
I've already tried reinstalling npm globally via npm install -g npm and it hasn't helped anything. I'm afraid that I'm going to have to just reinstall node completely.
Any help would be appreciated, thank you.
EDIT: upon further debugging, I'm noticing that the modules missing are always from #angular-devkit/build-angular/node_modules/core-js/modules. In addition to losing random modules like 'is-pure', the app will also randomly recompile many times when running ng serve
I figured out what was going on, if anyone in the future has the same problem. Turns out the answer has nothing to do with me botching my npm config. I didn't realize that on new Macbooks, any directory in the desktop is automatically managed by iCloud. At some point, probably an older version of the code before I migrated to Angular 9 was syncing the old code into my project. I was able to resolve this issue by changing the name of the parent directory where my project lived from filename to filename.nosync. adding '.nosync' causes iCloud to ignore syncing for whatever is in that file. I know I should have caught this, but hopefully this will help any mac users in the future who are experiencing similar problems.

react-native attempting to resolve built-in fetch function

I'm attempting to use the fetch function in react-native to grab a piece of data from the web. from what I understand reading the docs, the fetch function is built in to react-native.
when doing so, I get the module resolution error in the attached screenshot, where for whatever reason the react-native bundler is attempting to use the fetch provided by typescript from my ~/.cache directory.
I've previously had typescript 2.6 installed globally via npm, I uninstalled it to see if that might fix things, but the error persists.
I should note that the only things I've done for this project are to create it with create-react-native-app, add a little snippet to the App.js component stolen from the react docs to fetch some JSON, and yarn run eject the project (this error persisted before and after the ejection)
well in my turkey-induced frenzy, it appears I hadn't properly uninstalled the global typescript install on my computer.
having done so properly, the issue is resolved;
however the issue of react-native's module resolution strategy being incompatible with a global typescript installation persists.

Ember Cli not compiling with broccoli-emblem-compiler

I am trying to set up this repository locally https://github.com/lrdiv/ember-soundcloud and i have come across to this issue with broccoli-emblem-compiler. See the image in attached
From my understanding the broccoli-emblem-compiler is not able to compile my emblem templates and i don't know how i can figure it out.
These are all the steps i have done to install and set up the project with Ember-Cli
ember new soundcloud
ember install:addon ember-cli-coffeescript
ember install:npm broccoli-emblem-compiler
I have deleted the app folder and replace with the project https://github.com/lrdiv/ember-soundcloud that i have cloned
then i have installed the other node modules required
ember install:npm broccoli-static-compiler
ember install:npm broccoli-merge-trees
ember install:npm install body-parser
and at the end i run
ember server , and in my terminal i get that error i have attached.
What can i do now to sort this out? What's really the problem?
I did many things to try to fix this. One was replacing the project broccoli-emblem-compiler with this line in the project settings:
"broccoli-emblem-compiler": "git+https://github.com/cascalheira/broccoli-emblem-compiler.git"
At some time the error went away, I think it was when I used this repository. It is mentioned in the other issues.
I ran into problems with broccoli-emblem-compiler, but just had success with ember-cli-emblem-hbs-printer -
https://github.com/201-created/ember-cli-emblem-hbs-printer
I was able to solve this by specifying a version of emblem.js in my package.json file.
Specifically, I added the following line:
"emblem": "0.3.14"

Resources