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.
Related
I'm having problems importing my functional component BusinessCard (declared here https://github.com/HenryFBP/react-business-card-hfbp/blob/master/src/BusinessCard.tsx#L20)
into a different project (here https://github.com/HenryFBP/personal-website-react/blob/master/src/pages/PageContact.tsx#L3).
I used npm link react-business-card-hfbp, and I can see the symlinked folder, but I must be doing the export incorrectly or don't understand package.json.
I have also tried installing from https://www.npmjs.com/package/react-business-card-hfbp/ but that does not seem to work either.
The error (below) from webpack is Module '"react-business-card-hfbp"' has no exported member 'BusinessCard'.. I tried so many different combinations, edited package.json quite a lot, but I am stuck on this.
I'm sure the answer is simple, I just don't have enough experience with Node Modules to understand what is going on.
Thanks so much <3
I fixed it! With the help of a kind person on "Reactiflux" Discord server.
TL;DR: I was not compiling it into a module correctly. I should have used parcel to compile it into a module. I thought that TypeScript could be included in modules - this is apparently not correct, you must somehow turn it all into JavaScript first.
Working code:
npm run build
npm publish
Working package.json:
https://github.com/HenryFBP/react-business-card-hfbp/blob/master/package.json#L42
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.
I have the following based on instructions from here:
const Pubgapi = require('pubg-api');
const apiInstance = new Pubgapi('api-key');
For some reason when I run it, the console says unable to resolve path but it's looking for a node-modules which I don't have. This is an API wrapper that I am trying to use by the way. What could cause it to give me this error?
I did an npm install as the instructions said and nothing else before the statements above.
Error message:
Unable to resolve ../node-modules/pubg-api" from ".//components/Main.js`: The module `../node-modules/pubg-api` could not be found"
I have checked the node_modules folder. It is indeed pubg-api, not pubg_api. Requiring pubg_api gives me this error.
This error is probably related to the HTTPS library that the library you are trying to install depends on. Node.js libraries are not compatible with react-native since it is not working on a Node.js platform.
To overcome this issue you can try to use react-native-http library, but I did not try to use it before, so I'm not sure if it's going to work or not.
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.
I'm working on an open source electron project which I am building using webpack. One requirement for my project is to use the nodegit library which has to be built as a native module.
I've followed what appears to be conventional advice when working with native modules and electron. That is, I run electron-rebuild, have configured the source package to use and finally have configured node-loader to catch the import of any .node files.
Unfortunately, when I go to include the module, I end up with this error:
ERROR in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../build/Debug/nodegit.node' in
'C:\Users\atrauzzi\Development\atrauzzi\gerty\node_modules\nodegit\dist'
# ./node_modules/nodegit/dist/nodegit.js 18:11-49
# ./src/Layer/Domain/Thunktor/Git/CloneGitRepository.ts
# ./src/Layer/Gerty/Component/Repository/AddGitHubRepository.tsx
# ./src/Layer/Gerty/Component/Repository/AddRepository.tsx
# ./src/Layer/Gerty/Component/Workspace.tsx
# ./src/Layer/Gerty/Component/App.tsx
# ./src/Layer/Gerty/GertyServiceProvider.ts
# ./src/Bundle/GertyElectron.ts
The only thing I can see that's suspicious at this point is that when I rebuild the module to work with electron, I only get a Release directory, when the import seems to be looking for Debug:
This could be a red herring however as nodegit is written to try Debug as a fallback after Release has failed.
The general ask here is "How do I get this native module working in my project?".
I also have a corresponding question over at the repo, although on the off chance that my issue is unrelated to the library itself, or that there are some battle-worn veterans of native modules in electron, I figured SO would be a good place to check as well.
Try configuring your webpack by specifying the native module as an external dependancy rather than load it using the node-loader.
https://webpack.js.org/configuration/externals/