I use shift + alt + o to remove those unused modules I don't need anymore quite often.
It worked fine when doing so in the .tsx file before.
But somehow VS Code removes the import React from 'react' statement recently which didn't happen before.
Is it due to some updates of VS Code recently?
I found this setting below, not sure if it's related or not. But neither enabled and disabled status work.
Or any other reason that may cause this issue?
If you are using React v17 then no need to import React from 'react' in order to write JSX. You can read more here react v17
Because the need for adding import React from 'react'; is not need with the latest react update so that it is taken out.
For some reason, we keep React 16 in the existing project.
And one viable fix is to add jsx: 'react' to the compilerOptions in tsconfig.json
{
"compilerOptions": {
"jsx": "react",
}
}
Ref: https://github.com/microsoft/TypeScript/issues/49486#issuecomment-1157426215
Related
I am using React18.2.0 and I have the error shown below when running my project
I have seen some solutions which suggest if I am using Eslint (which I am), I should disable react scope in the rules. I have as shown in my Eslint config file below but it is not working.
Another solution was to add import React from "react"; This works, however, from the documentation we do not need to include this anymore from React17 upwards. So I do not know why I still have this error.
Any assistance would be appreciated
This is my package.json file
You need to add the following line to your .eslintrc:
{
"extends": ["plugin:react/jsx-runtime"]
}
Then only import React once in your top-level file, like App.jsx - and no need to import it anywhere else, unless you need an API like useEffect etc.
WebStorm doesn't detect this import from react. I always have to explicitly type it.
import React, {useState} from 'react'
This is kind of boring when working with many files.
NOTE: it does detect & autocomplete imports from current project. But doesn't detect/autocomplete any import from node_modules folder mostly.
Upgrading Webstorm to 2021.1 solved the issue. Thanks Lena for the comment.
What's the proper way to use TypeScript and React together, now that they have extracted the PropTypes in a separate project with version 15.5?
Everything runs fine after upgrading from 15.4 to 15.5, except that now I get a this warning in the console: "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." How do I make it disappear?
I have tried doing the following steps, but it doesn't remove the console warning.
Add the prop-types and #types/prop-types packages.
Import PropTypes everywhere that I import React, import * as PropTypes from "proptypes". Also tried with require("prop-types").
Turn off noUnusedLocals, to avoid that the compiler complains about PropTypes not being used.
But. Since I'm using TypeScript, the compiler is verifying the PropTypes at compile time, so I don't need to do the same at run time, and thus I shouldn't get the warning at all, right? I am hoping that maybe I can add or change a setting somewhere in the build configuration, that would make React compile without PropTypes.
I had the same issue because I was importing React as:
import * as React from 'react'
After I changed it to:
import React from 'react'
everywhere in my project the warning disappeared.
There is no need for prop-types package.
P.S. I use babel and have "allowSyntheticDefaultImports": true in tsconfig.json.
Figured it out: It's mobx-react-devtools that is causing the warning. The issue has been reported and fixed, but apparently not yet released.
https://github.com/mobxjs/mobx-react-devtools/issues/59
I try to implement slatejs package to my react app for creacting my custom editor,it works great,but hot-reloading stops working.
it stops when I do import into some component.I use webpack-dev-server+react-hot-loader
Firstly I supposed that the reason was my custom app settings ,but it didn't work for https://github.com/facebookincubator/create-react-app
and for https://github.com/davezuko/react-redux-starter-kit too
As I can understand slatejs package uses browserify,maybe this is the reason,but it shouldn't have an effect cause it's just a package and webpack settings for react-hot-loader exclude node_modules
Thank you!
I solved this issue,I don't know why but it helped.
const { Editor, Raw } = require('slate') // this import works with live-reload
import { Editor, Raw } from 'slate' // this import doesn't work with live-reload
I face the same issue as described here
https://github.com/babel/babel/issues/2504
So, any file which has only stateless components needs to have react imported like import React from 'react';, which is bit annoying (eslint gives error as unused variable; which I understand can be suppressed, still..). Is there a way to avoid having this import in a webpack based setup.
thanks.
I had the same issue. Then, I found this:
babel-plugin-react-require
This will automatically add the required require or import calls to get 'react' imported to your stateless component modules.
P.S. If you use webpack and babel6, ensure that you are not using the jsx-loader for your JSX files. I was getting errors with this and then I realized the jsx-loader is not required anymore. Just use:
babel-preset-react
You can use Webpack's ProvidePlugin (https://github.com/webpack/docs/wiki/shimming-modules#plugin-provideplugin):
new webpack.ProvidePlugin({
React: "react"
})
Now you'll have React available in every module without having to explicitly write import React from 'react'