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
Related
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'm working in a project that has multiple typescript projects. I'm trying to have a common package for all the interfaces, types, enums, etc.
I thought I could make it work creating a NPM package with Typescript and have an index.ts with this content:
When I'm working in the projects that depend on this package, everything seems fine, but when I want to start the development environment I'm getting this error:
I've got the suggestion of running ts-node with --skipIgnore flag, but I'm getting the same error:
Maybe I needed to compile the code and import the .js (doesn't make ANY sense, but at this point 🤷🏽♂️)... no luck.
Let me share both tsconfig.json:
The one from the "common" package:
The one from the project that depends on the common package:
Things suggested and tried:
Because your target is ES6, commonjs modules cannot use your package. The dependent project should change its module type to ES6 as well - #kellys
Changing project's module to ES6, brings me this error:
All right, let's add moduleResolution: "node" ... and I'm getting:
So I'm adding "type":"module" in package.json:
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.
I am developing a Visual Studio Code extension (languageserver), and it worked perfectly fine. However, in order to use the latest languageserver features, I updated the vscode-languageclient to the latest version V7.0.0
npm install vscode-languageclient
After removing both node_modules and out folders, and recompiling with
npm install
npm build
npm run compile
I get a TON of compile errors. To show just a few:
node_modules/vscode-languageclient/lib/common/callHierarchy.d.ts:1:75 - error TS2305: Module '"vscode"' has no exported member 'CallHierarchyItem'.
1 import { Disposable, TextDocument, ProviderResult, Position as VPosition, CallHierarchyItem as VCallHierarchyItem [...]
node_modules/vscode-languageclient/lib/common/callHierarchy.d.ts:1:116 - error TS2305: Module '"vscode"' has no exported member 'CallHierarchyIncomingCall'.
1 import { Disposable, TextDocument, ProviderResult, Position as VPosition, CallHierarchyItem as VCallHierarchyItem, CallHierarchyIncomingCall as VCallHierarchyIncomingCall [...]
I am sure that I an missing something important here, but I have no idea what. Btw, the behavior is the same on linux and windows. Maybe somebody had a similar issue or knows what I am doing wrong. Thanks in advance!
As usual, after asking the question I figured it out almost right away.
I did not delete the package-lock.json file. This was the reason for the ton of error messages. It lead to some kind of version mismatch / inconsistency in the code base. So deleting it before executing npm install fixed this issue.
Then, however, the src/extension.ts file with the async function activate() inside showed some errors. The solution here - besides minor follow-ups - is to change
import { LanguageClient, LanguageClientOptions, ...} from 'vscode-languageclient';
to
import { LanguageClient, LanguageClientOptions, ...} from 'vscode-languageclient/node';
Just a follow up answer as this problem seemingly occurs very often: as of version 7.0.0 of the vscode-languageclient package, the codebase was split into "common", "node" and "browser".
split code into common, node and browser to allow using the LSP client and server npm modules in a Web browser via webpack. This is a breaking change and might lead to compile / runtime errors if not adopted. Every module has now three different exports which represent the split into common, node and browser. Lets look at vscode-jsonrpc for an example: (a) the import vscode-jsonrpc will only import the common code, (b) the import vscode-jsonrpc\node will import the common and the node code and (c) the import vscode-jsonrpc\browser will import the common and browser code.
Source: https://github.com/microsoft/vscode-languageserver-node#3160-protocol-600-json-rpc-700-client-and-700-server
Outdated docs are still floating around and it might not be obvious that "npm install vscode-languageclient" will get you the latest version that does not match the old documentation.
I found this library called depcheck:
https://www.npmjs.com/package/depcheck
At first I just assumed that it did what I want - find modules that are used in the code but not declared in package.json, but all it does it look for unused dependencies. I am looking for the exact reverse- dependencies that are used in the code but not declared in package.json.
Is there such an NPM module that can do this? I can't find it. The reason this matters is that when deploying Node.js applicatons it's very common that we are missing a dependency in package.json that we are using our code because one of us forgot to include the --save option when running npm install x.
dependency-check looks like it does what you need.
I could not find a suitable solution to this problem so I created my own that we are using in production with Mocha testing -, I hope it might be useful to you also:
https://www.npmjs.com/package/nodejs-dep-check