I'm new to React (and really web development) and I'm working in one of the starter projects. I have tried to install several npm packages to work with and they seem to be installing correctly. I can import the class into my Main.js file but when I hover over the import it says
Could not find a declaration file for module 'react-ui-cards'. '.../Gatsby/node_modules/react-ui-cards/index.js' implicitly has an 'any' type.
and it will throw an error if I try to build using these components
Related
Hi I am trying to import some js file of a installed dashboard in a typescript file of React app. But it is not working, Below I have added a screenshot of the imports and error.
Please help:
The error msg tells you precisely what to do:
npm i --save-dev #types/adminbsb-materialdesign
In order for typescript to work with external libraries you need to import type definitions (*.d.ts) for them. --save-dev makes the package available in dev time only.
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
I cannot import RecordRTC from 'recordrtc'
I have installed the node module, but when I try to import it, i receive the following error:
Could not find a declaration file for module 'recordrtc'. '/Users/jnelson/Documents/GitHub/VidApp/node_modules/recordrtc/RecordRTC.js' implicitly has an 'any' type.
Try `npm install #types/recordrtc` if it exists or add a new declaration (.d.ts) file containing `declare module 'recordrtc';` TS7016
I've tried simply declaring record rtc as an any type in a .d.ts file but that did not seem to help. I feel like this should be a common issue and either a simple solution or someone has made a .d.ts file for this?
I created the app with react-ionic. The error message above is from a local web browser from my desktop
Try npm install #types/recordrtc --save
The above error occurred because you are using TypeScript with your React application.
I have just switched one of my React Projects over to TypeScript, which is actually my first time using it. So I renamed my App.jsx file to App.tsx and got some errors with my dependencies. Most of them I could fix by using npm i #types/{package}. There are three errors left though:
1) For two of my packages, there is no #types package, as they aren't that popular. It says "Could not find a declaration file for module [...] [...]/index.js' implicitly has an 'any' type. [...]" In the rest of the error it says that I should try to install the #types package if it exists, which doesn't. If it doesn't exist, it says something about some declaration file, but I wasn't able to find any information about that online.
2) It almost says the exact same thing for the 'react' package, even though I installed the #types package of it. Instead of telling me to install the package it says: "If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react'" which I don't understand what it is supossed to mean.
Also, I copied the tsconfig.json from the create-react-app typescript template (create-react-app {name} --typescript
1) You can make a types folder where you will keep all the declarations that you can't find under #types. Basically you make a some-react-component.d.ts file where you declare:
declare module "some-react-component";
2) You can try to import react this way: import * as React from "react"; and see if that's fixing it.
I'm new to React and new to npm module publishing, there is a beginning for all things!
I have created a react module.
I have created a react app (using create-react-app) and i have imported the module directly (not via a npm install).
On this case, i got no errors. The app is compiling without problems.
However, when i'm trying to use my module by importing it from npm (after it's get published), it fails.
To get this issue, i have created another react app (always by using create-react-app) then i have installed my package using npm i --save my-module-name.
I'm importing it commonly by using import { SomeComponent } from 'my-module-name' instead of importing it directly.
And i got the following error
Module parse failed: Unexpected token (59:37)
You may need an appropriate loader to handle this file type.
| }
|
| generateRecoverActionsContainers = () => {
|
After some searchs, it seems to come from the Webpack configuration. But, during my searchs, i saw that people recommand to not touch the react Webpack default configuration.
From there, i'm a bit lost on how to fix that and also, why it was compiling when the module was imported directly and not compiling when it was importing from node_modules... Should i had a webpack configuration in my npm module?
Thanks in advance for your precious help!
When you publish a module on npm, you should publish compiled code. Webpack doesn't compile node_modules