Recently I have upgraded to React 17 and it's started showing "'React' is declared but its value is never read" error in all the files. As per the React Doc I don't need to import the React anymore. It's working if I remove it but I have concerns here! Mine was a big project.. i don't want to touch each and every file. Is there a way that i get of this problem without removing React from import statement.
I'm using typescript and ESLint.
Add DISABLE_NEW_JSX_TRANSFORM=true in your .env file, and don't forget to stop/start your project
Related
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
I've already set the following rules to off in my eslintrc.json file:
But whenever I press ctrl+. to try importing a component from a different file vscode suggests me to import React.
is there any way to stop this from happening?
below are the plugins I'm using with the .eslintrc.json:
This isn't an issue with ESLint - this is an issue with Typescript. It's tracked here and you can confirm that even if you disable ESLint for your project you'll get this error and that bad suggestion. At the moment there's no workaround other but it will hopefully be fixed in TS4.3. I will update this answer if a workaround or solution is released.
This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.