Menu
I am getting the
Jsx is used without importing react
Notification by WebStorm even tho I made react library global via:
My webpack.config.js
plugins: [
new webpack.ProvidePlugin({
React: "react"
})
]
My declarations.d.ts
import _React from "react";
declare global {
const React: typeof _React;
}
It is no error and the code runs fine, but I do not like such an unnecessary notification. How do I tell WebStorm that I did import react globally?
958
Starting from React 17, JSX transform use special jsx function internally. You don't need to import it.
Based on that, we can go back to the original question of this article and understand the necessity to import React whenever we created a React component. Without it, the transformed JSX code would fail in the browser as React needs to be in scope to create components through its createElement function.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
React doesn't require babel but the library is built on the concept of using ES6 javascript syntax. React app however can be built with old ES5 syntax and JSX which would remove the need for Babel but you would lose the potential benefits of ES6.
Just turn the inspection off in Settings | Editor | Inspections | JavaScript and TypeScript | Imports and dependencies, Missing React import with JSX
120
The setting is now under Editor > Inspections > JavaScript and TypeScript > Imports and dependencies > Missing 'React' namespace import in JSX code
To completely disable this inspection, select No highlighting as the Severity option.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
