I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?
Ive been getting these strange type errors on my typescript project for certain packages.
Ex:
'TimeAgo' cannot be used as a JSX component.
Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{}>>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/user/app/node_modules/#types/react-bootstrap-table-next/node_modules/#types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
I don't get these type errors on my local windows machine but they keep occurring in my linux virtual machine. I've deleted the project many times, cloned my repo and installed packages again in different versions of node and I still get the same type errors.
Checked node 12.18.3, 16.13.1
Here is some quick package json info:
"react-timeago": "^6.2.1",
"react-custom-scrollbars": "^4.2.1",
"react-custom-scrollbars-2": "^4.4.0",
"react": "^17.0.2",
"next": "^12.1.1",
"#types/react-custom-scrollbars": "^4.0.10",
"#types/react-timeago": "^4.1.3",
"#types/react": "^17.0.44",
"typescript": "^4.3.5"
"#types/node": "^14.18.12",
This happens on basic custom components:
MyTst.tsx
import TimeAgo from "react-timeago";
const Mytst = () => {
return (
<div>
<TimeAgo date={"02/02/2022"} />
</div>
);
};
export default Mytst;
I get this error for react-custom-scrollbars-2 as well. There seems to be an issue with matching the types correctly between the library which contains the component and the #types files associated with them. Anyone have any ideas on how to resolve these type errors?
Had the same issue.
Just add this
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
to package.json file and run yarn command.
UPD: Just a bit detailed answer:
#types/react-dom has its own dependencies and one of them is #types/react with a version set to '*' - a major release, that now, probably, refers to 18.
Even if you specify some strict versions in your package.json (without ^) parent package might install its own duplicates of packages that you are already using for its own purposes.
By using resolutions we are specifying strict restrictions for dependencies of dependencies.
You will need to fix the version for #types/react package because many react libraries have dependency set as #types/react : "*", which will take the latest version of the package. (I suppose they just released version 18)
To do that you can add this in your package.json
"resolutions": {
"#types/react": "^17.0.38"
}
It will just work fine with yarn, but if you are using npm, then you will also need to add this in "scripts" section of your package.json
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
This will simply use npm-force-resolutions package to fix versions from resolutions.
And then after doing npm install, your app should work just fine.
I known issued today
rm -rf node_modules
rm -rf yarn.lock
npm install
just used npm install sovled problem
but I don't know what happend
Had this with Styled Components. Resolutions didn't work for me so here's another
solution:
Brute force type casting:
const ThemeProviderFixed = ThemeProvider as unknown as React.FC<PropsWithChildren<{ theme: string }>>;
Sahil's answer is correct for npm and yarn, but if you are using pnpm, you need a slightly different setup in your package.json file:
"pnpm": {
"overrides": {
"#types/react": "^17.0.38"
}
}
If you are using a monorepo with several packages, this only works at the root package.json file of your repo. You can read more about it here in the pnpm docs.
I also had the same issue, so I updated npm version ^6.0.0 -> 8.0.0 and it was resolved.
Check npm version.
I came across this issue recently when upgrading to React 18 and forgetting to upgrade my corresponding types in devDependencies.
What worked for me was upgrading React types to match in the package.json file as shown
{
...
"dependencies": {
...
"react": "^18.1.0",
},
"devDependencies": {
...
"#types/react": "^18.0.8",
}
}
I recently ran into this with a Yarn monorepo where a Typescript create-react-app subproject had installConfig.hoistingLimits=workspace. This configuration prevents hoisting of dependencies to the top-level of the monorepo.
When running react-scripts start, the type checker was still looking at the top-level #types and not finding the matching #types/react for the version of React configured on the project. The fix that resolved it was to add the following to the tsconfig.json in the subproject:
"compilerOptions": {
...
"typeRoots": ["./node_modules/#types"]
},
...
This points Typescript at the type definitions that are installed for the specific sub-project.
Ok. I ended up fixing this problem but to warn you in advance, there wasn't a magical way to do this.
I basically uninstalled all the #types I think were the offenders. You can find this out by reading your error window. The key was this message in my original error above.
Type 'React.ReactNode' is not assignable to type 'import("/home/user/app/node_modules/#types/react-bootstrap-table-next/node_modules/#types/react/index").ReactNode'.
If you see where the node module types are pointing to and its not associated with your library, then remove it. In my case, my issue was the package TimeAgo and the type error was showing that types were assigned to a different package. So I uninstalled it and kept cycling through the errors until it went away.
Then I use npm run build to do type checks and instruct me which types I had to reinstall. (There is probably a better way to do this part but it worked for me even though it was tedious.)
This issue seems to happen when you have a ton of different libraries and their types that have similar dependencies and overtime if they aren't needed, don't do what I do and just keep them piled up in your package.json.
So if you think any type can have conflicts with your library, uninstall and see if the error goes away, and then reinstall if other type errors appear that say the dev type package is missing. I also had some #type packages as dependencies instead of devDependencies which I removed and moved back into dev. Don't know if that played a part.
When in doubt, remove all applicable types and see if the issue is resolved.
If you have older version of npm, just update npm to version > 8.0.0.
It worked for me.
I had npm version 6.x.x. I tried many solutions, but update npm to new version fix this problem easy.
for npm!
check which version of node and npm you have installed.
if you update to 8.x, npm provides you the same thing as resolution does for yarn but its"overrides".
update your package like this:
"overrides": {
"#types/react": "17.x.x",
"#types/react-dom": "17.x.x"
}
my npm and node versions were up to date on local instance, but not on git ci. After the update, it was working without to override the versions for react and react-dom.
Unfortunately in my case I can't use the most voted answer since I need #types18 since I need to use the latest hooks from react#18 like useId and I can't import them using #types/react#17 since they have no exported members for those hooks.
I was able to use latest types fixing the broken typed deps, thanks to #Chris Web' s answer. For example for the Redux Provider:
// temp fix due to #types/react#18
const Provider = _Provider as unknown as React.FC<{
children?: JSX.Element | string;
store: any;
}>;
The store: any is not ideal, but it's just a temp fix.
You can solve this issue by following the above solution for react
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
and for react-native you don't need to add type for react-dom
"resolutions": {
"#types/react": "17.0.2",
},
After this if you still getting error for react types,
add the type package separetly for react
npm install -D #types/react#17.0.2
Note - don't add "^" in resolution as it will try to install the latest version of packages which may cause the same problem.
Problem
For those who have this type of error in the APP and are using yarn instead of npm.
Solution
Just add the to resolutions and preinstall script inside the package.json file and them execute yarn preinstall and yarn.
package.json
"resolutions": {
.....
"#types/react": "^17.0.38"
....
},
"scripts": {
......
"preinstall": "yarn --package-lock-only --ignore-scripts"
......
},
References
Source
Slightly different answer that worked for me (in case the above doesn't work for you). I had a node_modules folder in my user root. So my project folder looked like this:
~/checkouts/project/node_modules
but I also had a node_modules folder installed at the user root (probably an accident at some point):
~/node_modules
The way npm packages work is it crawls up the directory structure grabbing npm packages along the way. After removing this directory the problem went away.
Tested this on two windows machines one mac and one ubuntu. One win machines was fine (no error on build), the other wind machine gave this error on build. Mac was also fine but ubuntu was also giving this error on build. I was frustrated. Tested with different node versions but that did not help.
In the end had to update some types versions (not sure though if all four needed to be updated but after the update error disappeared):
"#types/react": "^16.14.3",
"#types/react-dom": "^16.9.10",
"#types/react-router": "^5.1.11",
"#types/react-router-dom": "^5.1.7",
to:
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#types/react-router": "^5.1.18",
"#types/react-router-dom": "^5.3.3",
i tried it in two ways, with yarn's resolution it solved it, but then i deleted my yarn.lock and updated the react's type and it worked for me too without using yarn's resolution
yarn upgrade #types/react#^18.0.21
I posted a different answer but it was basically a duplicate answer so I'll provide another approach.
If you're using yarn, you can run yarn dedupe and it will make the necessary changes to your yarn.lock file. It will consolidate any references to the same package to resolve to the correct version. As you can see from here, the - lines are what were removed and the + line is modified and saved:
-"#types/react#npm:*, #types/react#npm:>=15, #types/react#npm:>=16.9.0":
- version: 17.0.43
- resolution: "#types/react#npm:17.0.43"
- dependencies:
- "#types/prop-types": "*"
- "#types/scheduler": "*"
- csstype: ^3.0.2
- checksum: 981b0993f5b3ea9d3488b8cc883201e8ae47ba7732929f788f450a79fd72829e658080d5084e67caa008e58d989b0abc1d5f36ff0a1cda09315ea3a3c0c9dc11
- languageName: node
- linkType: hard
-
-"#types/react#npm:^18.0.0":
+"#types/react#npm:*, #types/react#npm:>=15, #types/react#npm:>=16.9.0, #types/react#npm:^18.0.0":
"#types/react#npm:*, #types/react#npm:>=15, #types/react#npm:>=16.9.0"
was consolidated into
"#types/react#npm:*, #types/react#npm:>=15, #types/react#npm:>=16.9.0, #types/react#npm:^18.0.0"
In my case, I put the wrong type of value inside a div.
Error
Reason
Fix
Overview:
I built an NPM library using TypeScript and it's been almost 9 months since I've last updated it (I didn't have the time). However, it uses the following libraries:
react-native-modal
#react-native-picker/picker (Used to be #react-native-community/picker, but that library is now deprecated in favor of the new library)
#react-native-community/datetimepicker
My Library (react-native-ultimate-modal-picker) package.json:
I have all 3 of the listed libraries above set as peerDependencies, but I'm not sure if I'm missing something else like podfiles.
"peerDependencies": {
"#react-native-community/datetimepicker": ">=3.0.0",
"#react-native-picker/picker": ">=1.8.3",
"react": "*",
"react-native": "*",
"react-native-modal": ">=11.0.0"
},
What Works:
The code works when running in the iOS Simulator, but when adding the my library react-native-ultimate-modal-picker to a project, it gives the error.
Error:
Error: Invariant Violation: requireNativeComponent: "RNCPicker" was not found in the UIManager.
Imported NPM Library into project:
import { DropdownList } from 'react-native-ultimate-modal-picker';
const testItems: Array<PickerValue> = [
{ label: '1', value: '1' },
];
<DropdownList
title="Test"
items={testItems}
onChange={(value: string) => console.log(value)}
/>
Github Repo (My Library that currently isn't working)
https://github.com/jefelewis/react-native-ultimate-modal-picker
Possible Reasons For Issues:
podfiles?
Cache?
Improper build/export of NPM library?
Can try steps below:
rm -rf node_modules && yarn cache clean && yarn install
cd ios && pod install
Open xCode from yourapp.xcworkspace file inside ios folder.
Select Clean Build Folder from xCode product menu.
Run your app directly from xCode product menu.
add this line in your podfile:
pod 'RNCPicker', :path => './ReactComponent/node_modules/#react-native-picker/picker'
the path you may need change to your real path like others in your podfile and pod install again.
In case you are using react-native-picker-select with RN above 0.60 you also need to install #react-native-community/picker
(not sure why it is not a dependency of it...)
npm install #react-native-community/picker
pod-install
The below solution worked for me.
Install the below-mentioned package apart from react-native-picker-select
// React Native CLI
npm install #react-native-community/picker
npx pod-install
// Expo users
expo install #react-native-community/picker
Credit - https://blog.logrocket.com/how-to-use-react-native-picker-select/
For to work install both npm packages and pod install
or add these lines in your package.json and pod install
"#react-native-picker/picker": "^2.4.4",
"react-native-picker-select": "^8.0.4",
like this:
"dependencies": {
"#react-native-picker/picker": "^2.4.4",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-picker-select": "^8.0.4"
},
The error shown when yarn start command is given
Error details:
Internal Error: confusion#workspace:.: This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
at J.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:276872)
at i.getCandidates (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:266282)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:2:286432 at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349928
at new Promise (<anonymous>)
at e.exports (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349910)
at o (C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349611)
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349684
at C:\Users\risha\Desktop\Front-End Web Development with React\.yarn\releases\yarn-berry.js:57:349727
at new Promise (<anonymous>)
My package.json file is
{
"name": "confusion",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
}
}
I have tried adding
"scripts":{
"start":"react-scripts start"
}
But no change in the error.
Cross-posting from this question:
The problem in here seems to be an existing yarn.lock file inside of one of the workspaces. Deleting it solves the problem.
More info:
Example: 3 workspaces: 2 create-react-app (app, home) and one shared component: (components)
Inside the component folder a lingering yarn.lock file exists. Remove it.
Also check that:
All your workspaces have "private:true" in each of their package.json (same level as name, private, source).
Check that you have added your workspaces inside a "workspaces" key in the main package.json
When you're executing yarn workspaces myworkspace myworkspace matches the name of your workspace in its package.json. In my case, the name of the workspace inside the components folder is called #schon/components, so I need to address it as yarn worksapces #schon/components instead.
It means a certain package is not installed, and you need to install it.
Try running yarn install to install the required packages.
If this does not work, try deleting the node_modules folder and run yarn install again.
If it fails, delete both node_modules folder and yarn.lock file and run yarn install.
try to remove node_modules by installing this package globally
yarn add global rimraf
then remove the node
the -> rimraf node_moules
then remove the yarn.lock the install it by yarn
I am creating an app in react using the react template provided by visual studio 2017. I want to make use of react-cookie in my application. I have installed this lib using command
npm install react-cookie
But when i try to import it in my component it gives me the following error on compile time:
import { Cookies } from 'react-cookie';
(TS) Could not find a declaration file for module 'react-cookie'. 'D:/somepath/node_modules/react-cookie/lib/index.js' implicitly has an 'any' type. Try npm install #types/react-cookie if it exists or add a new declaration (d.ts) file containing declare module 'react-cookie'
I tried installing it using
npm install #types/react-cookie
But the console shows me a message that
#types/react-cookie is not in the npm registry. You should bug the author to publish it (or use the name yourself
I am very new to react so maybe i am making a silly mistake. Can somebody help me out as i need to use this library in my project.
I found types definitions
{
"dependencies": {
"universal-cookie": "^2.1.2",
"universal-cookie-express": "^2.1.2",
"react-cookie": "^2.1.2"
},
"devDependencies": {
"#types/universal-cookie": "git+ssh://git#github.com:S64/types-universal-cookie.git#v2.1.2-2",
"#types/universal-cookie-express": "git+ssh://git#github.com:S64/types-universal-cookie-express.git#v2.1.2-2",
"#types/react-cookie": "git+ssh://git#github.com:S64/types-react-cookie.git#v2.1.2-2"
}
}
https://github.com/S64/types-react-cookie
open up git bash from start menu (WINDOWS)
ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
ssh-keygen -t rsa -C "user.email"
Add the id_rsa.pub key to SSH keys list on your GitHub profile.
if you are really interested look at this commit (passed tslint)
https://github.com/ricardosaracino/heroes-react-ts/commit/19a9e0f55940c9ac7007e093d08eae9d17e7d7ba