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.
Related
cross post from github
I have two UI components library. One of them (#ikas/components) library does not have any issue but the other (same config) throw this error. Can anyone have any idea?
When i comment inhouse-components it is work. but when i open it it crash... any idea?
I try to external,
Also try add import React from "react" to tsx files. but there error is still there.
I am expecting the #ikas/inhouse-components is should also work as well as #ikas/components
I also control the dist (output folder) .d.ts and show React import different but I don't know if it's relevant
I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
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
For bundle size optimization instead of getting components from the lib folder, I am importing it from the es folder.
Example:
import Modal from 'antd/es/modal';
So on writing test cases it is giving me the following error
SyntaxError: Cannot use import statement outside a module
I have gone through related questions possibly duplicate but couldn't resolve it with my current implementation as it does not fall to global scope.
So my question is, Is there any way to achieve this
I tried referring to the following links too but no help,
https://github.com/reactstrap/reactstrap/blob/master/package.json#L21
https://medium.com/#fredriccliver/syntaxerror-cannot-use-import-statement-outside-a-module-69182014b8c6
Change
import frFR from 'antd/es/locale/fr_FR';
to
import frFR from 'antd/lib/locale/fr_FR';
fix this problem.
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'