I am an Angular Developer and new to React , This is simple react Component but not working
import react , { Component} from 'react';
import { render } from 'react-dom';
class TechView extends Component {
constructor(props){
super(props);
this.state = {
name:'Gopinath'
}
}
render(){
return(
<span>hello Tech View</span>
);
}
}
export default TechView;
Error :
'React' must be in scope when using JSX react/react-in-jsx-scope
The import line should be:
import React, { Component } from 'react';
Note the uppercase R for React.
Add below setting to .eslintrc.js / .eslintrc.json to ignore these errors:
rules: {
// suppress errors for missing 'import React' in files
"react/react-in-jsx-scope": "off",
// allow jsx syntax in js files (for next.js project)
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
}
Why?
If you're using NEXT.js then you do not require to import React at top of files, nextjs does that for you.
Ref: https://gourav.io/blog/nextjs-cheatsheet (Next.js cheatsheet)
If you're using React v17, you can safely disable the rule in your eslint configuration file:
"rules": {
...
"react/react-in-jsx-scope": "off"
...
}
For those who still don't get the accepted solution :
Add
import React from 'react'
import ReactDOM from 'react-dom'
at the top of the file.
If you are running React 17+ (and in 2022, I assume, that you are) - 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.
import React, { Component } from 'react';
This is a spelling error, you need to type React instead of react.
add "plugin:react/jsx-runtime" to extends in your eslint config file, refer react-in-jsx-scope
If you'd like to automate the inclusion of import React from 'react' for all files that use jsx syntax, install the react-require babel plugin:
npm install babel-plugin-react-require --save-dev
Add react-require into .babelrc. This plugin should be defined before transform-es2015-modules-commonjs plugin because it's using ES2015 modules syntax to import React into scope.
{
"plugins": [
"react-require"
]
}
Source: https://www.npmjs.com/package/babel-plugin-react-require
I had the similar issue.
Got fixed after i added the code below in the main component: App.js
If you have other components, make sure to import react in those files too.
import React from "react";
The error is very straight forward, you imported react instead of React.
In my case, I had to include this two-line in my index.js file from the src folder.
import React from 'react'
import ReactDOM from 'react-dom'
In your case, this might be different.
You may need to include components if you're using class-based components.
import React, { Component } from 'react';
Alternatively, If you are using eslint you can get some solutions from the above comments.
know more
When using the react framework, you first need to import the react from react and always keep the first letter of react in uppercase after import.
import React, {Component} from 'react'`
import React, { Component} from 'react';
import { render } from 'react-dom';
class TechView extends Component {
constructor(props){
super(props);
this.state = {
name:'Gopinath'
}
}
render(){
return(
<span>hello Tech View</span>
);
}
}
export default TechView;
for me I got this issue once I used npm audit fix --force so it downgrade react-scripts to version 2 and it forces me to install eslint versions 5 and issues started to flood, to fix this I have update it again react-scripts and things worked out.
Also make sure that your eslint contains those rules
module.exports = {
extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
...
// React scope no longer necessary with new JSX transform
'react/react-in-jsx-scope': 'off',
// Allow .js files to use JSX syntax
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
...
},
}
Whenever we make a custom component in React using JSX, it is transformed into backward-compatible JS code with the help of Babel.
Since the JSX compiles into React.createElement, the React library must also always be in scope.
Example:
This custom component:
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
is transformed into:
React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
^^^^^
Since the converted code needs the React library, we need to import it into the scope.
React Docs Reference
Fix: Import React
import React from 'react';
// or
import * as React from 'react';
Pick one, it depends on the user!
NOTE:
As of React 17+, we are free from doing such import, but it's better to add the imports just to be on the safe side because errors can be generated because of ESLint!
One can disable the rule in the ESLint config file (.eslintrc.json) to ignore these errors:
"rules": {
"react/react-in-jsx-scope": "off"
}
This is an error caused by importing the wrong module react from 'react' how about you try this:
1st
import React , { Component} from 'react';
2nd Or you can try this as well:
import React from 'react';
import { render } from 'react-dom';
class TechView extends React.Component {
constructor(props){
super(props);
this.state = {
name:'Gopinath',
}
}
render(){
return(
<span>hello Tech View</span>
);
}
}
export default TechView;
Upgrading the react-scripts version to latest solved my problem.
I was using the react-scripts version 0.9.5 and upgrading it to 5.0.1 did the job.
One thing that I noticed is that import React from "react"; should be there instead of import react , { Component} from 'react';
Other Things I have done is,
(1) added below lines to index.js file.
import React from 'react'
import ReactDOM from 'react-dom'
if not worked add this line for ReactDOM import ReactDOM from "react-dom/client"; instead of import ReactDOM from 'react-dom'
(2) change following properties for eslint configuration file.
rules: {
"react/react-in-jsx-scope": "off",
}
But Starting from React 17,Dont need to add import React from 'react' and next js as well
The line below solved this problem for me.
/** #jsx jsx */
import {css, jsx} from "#emotion/react";
hope this help you.
Follow as in picture for removing that lint error and adding automatic fix by addin g--fix in package.json
in babel, add "runtime": "automatic" option
{
"presets": [
[
"#babel/preset-react",
{
"runtime": "automatic"
}
],
"#babel/preset-env"
],
"plugins": [
]
}
[EDIT April 19th]
I have created a CODESANDBOX to show the problem, of course, that doesn't occur in sandbox.
The only difference between this code and mine is that I have duplicated the code of the Button component in the SANDBOX example, whereas in my App the Button component is imported from a library (that belongs to the same yarn workspace as the app). The library is built with webpack and babel, excluding React and Material-UI
externals: {
react: "react",
"react-dom": "react-dom",
"react-router": "react-router",
"react-router-dom": "react-router-dom",
"#material-ui/core": "#material-ui/core",
"#material-ui/icons": "#material-ui/icons",
"#material-ui/lab": "#material-ui/lab",
"#material-ui/styles": "#material-ui/styles",
formik: "formik",
},
Inspecting the components in the Browser shows the difference when styling, between sandbox and my app :
on both sides, the class are applied to the component the same way:
in sandbox
in my app
but on sandBox, the MuiButtonBase-root background-color is overridden by the MuiButton-root background-color
whereas it is the opposite in my app. The MuiButton-root backGroundColor seems to be overriden bu the MuiButtonBase-root background-color
However, if I create a component RecreatedButton in the App by just importing the Button component of my UI Library, and re-exported it without changing anything (just passing a specific props the component is requested), then the styling is applied correctly, as in the sandbox example.
this is kind of weird to me...
Why such a behavior ?
just importing and rexporting as is the component
import {
Button as LibraryButton,
EButtonTypes,
IButtonProps,
} from "#mylibrairy/reactcomponentscommon"; <---- importing the button
import React from "react";
const RecreatedButton: React.FC<IButtonProps> = (
props: IButtonProps
): JSX.Element => {
return (
<LibraryButton type={EButtonTypes.BUTTON}>
{props.children}
</LibraryButton>
);
};
export { RecreatedButton };
Using both in app.ts. One got the theme, the other not
import { ThemeProvider } from "#material-ui/core/styles";
import {
Button as LibraryButton,
EButtonTypes,
IButtonProps,
} from "#mylibrairy/reactcomponentscommon"
import React from "react";
import AppBar from "../../UIComponents/AppBar";
import { RecreatedButton } from "../../UIComponents/Button";
import { MUITheme } from "./../../Theming/defaultTheme";
export const MainApp: React.FC = (): JSX.Element => {
return (
<ThemeProvider theme={MUITheme}>
<>
<AppBar />
<LibraryButton type={EButtonTypes.BUTTON}> I'm the library component, directly used as is, and background color is NOT CORRECT ></LibraryButton>
<RecreatedButton>
I'm recreated button, just rexporting the library component, and the backgroundcolor is correct !?!?{" "}
</RecreatedButton>
</>
</ThemeProvider>
);
};
finally I found one solution (not sure that it fixes the root cause as I still do not understand where it comes from).
I Guess it may helps some people here that are facing a similar issue with global theming in Material-Ui.
It turned out that I had to change the way to build my react/material-Ui components library #mylibrairy/reactcomponentscommon.
1- Make sure that in the library, all imports where such as import { Button} from "#material-ui/core" and not for example import Button from "#material-ui/core/Button"
2- Remove the usage of file-loader plugin in the .babelrc to make sure it doesn't change the way to import material-ui components
3- Push #material-ui/core and #material-ui/icons as a dev and peer dependencies in the package.json of the library.
4- Rebuilt the library using webpack and babel to compile typescript tsx to js.
All issues of priority seems to disappear (have done a lot of tests and checked in the chrome dev tools). In the example above, the .MuiButton-root class is well applied after the .MuiButtonBase-root one, thus overriding as expected the backgroundColor.
Would admit that I'm a little bit confused why this fixed the issue...
Rgds
For me, i just had to import "makeStyles" and "createStyles" from "#material-ui/core" not from "#material-ui/core/styles". i just did this and it fixed the issue but took me a lot of time to figure this out.
so import them like this:
import { makeStyles, createStyles } from "#material-ui/core";
not like this:
import { makeStyles, createStyles } from "#material-ui/core/styles";
You may try overriding default globals for MuiButtonBase
const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButtonBase: {
// The default props to change
root:{
backgroundColor: 'red'
}
},
},
});
function DefaultProps() {
return (
<ThemeProvider theme={theme}>
<Button>Change default props</Button>
</ThemeProvider>
);
}
Working sandbox here - https://codesandbox.io/s/override-button-base-7qwd5
You have Kendo Angular components, you are running the unit tests and you get an error with the code below.
<kendo-grid [data]="gridData" [height]="410">
It works but the unit test doesn't compile.
The spec.ts file needs an import
import { GridModule } from '#progress/kendo-angular-grid';
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KendoGridExampleComponent],
imports: [GridModule]
You can copy the import path from the app.module.ts file
I'm trying to add/change Font Awesome icon in JHipster 5 app.
I can print only icons that already in default template.
I can change:
<fa-icon [icon]="'home'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
to:
<fa-icon [icon]="'asterisk'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
but can't change to
<fa-icon [icon]="'tv'"></fa-icon>
<span>
<span jhiTranslate="global.menu.home">Home</span>
</span>
or any other icon.
Are they defined in some place?
Icons are in src/main/webapp/app/vendor.ts, here you can add new icons.
To complete Alexandre answer ;
Example to add the twitter icon :
(in "jhipsterVersion": "5.1.0")
read node_modules/#fortawesome/angular-fontawesome/README.md
yarn add #fortawesome/free-brands-svg-icons in src/main/webapp/app/vendor.ts
declare your icon :
.
import { faTwitter } from '#fortawesome/free-brands-svg-icons';
library.add(faTwitter);
in your html, use and don't forget to tell it is from fab (Brand)
.
<fa-icon [icon]="['fab', 'twitter']"></fa-icon>
Maybe you should also re-run webpack:build. But for me it worked directly
(see the top of of src/main/webapp/app/vendor.ts)
/* after changing this file run 'yarn run webpack:build' */
For Jhipster 6 the file to define icons to be used is
src/main/webapp/app/core/icons/font-awesome-icons.ts:
import { faAmazon } from '#fortawesome/free-brands-svg-icons';
export const fontAwesomeIcons = [
faAmazon,
faUser,
...
and remember to refer to the icon with (note 'fab' instead of 'fa' for brands icons):
<fa-icon [icon]="['fab', 'amazon']"></fa-icon>
If you plan to include brands free icons (amazon icon is there) you should also install the npm package:
npm install --save #fortawesome/free-brands-svg-icons
If you tried to add your icons like so:
vendor.ts
import {
// other imports
faFileSignature,
faLock
} from '#fortawesome/free-solid-svg-icons';
// other imports
library.add(faFileSignature);
library.add(faLock);
but it didn't work and you get an error telling you that global styles are deprecated, I fixed it like this.
I created a new icon.module.ts and imported it in the shared-libs.module.ts.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FontAwesomeModule, FaIconLibrary } from '#fortawesome/angular-fontawesome';
import { fas } from "#fortawesome/free-solid-svg-icons";
#NgModule({
declarations: [],
imports: [
CommonModule,
FontAwesomeModule
]
})
export class IconsModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas);
}
}
I hope I helped.
I am looking to use Recharts as a graph system for my React app.
To install I have gone to the installation guide and entered the following command in the terminal
$ npm install recharts
My jsx file then looks like the code below:
import React from "react";
import ReactDOM from "react-dom";
import ReCharts from "recharts";
var App = React.createClass({
render: function() {
var data = [{ name: 'a', value: 12 }];
return (
<LineChart width={400} height={400} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'));
It is not working as I am not importing recharges correctly. Can anyone advise and explain how this should be imported and any advice on how I soul know if I am exporting another library without any explicit guidance in its documentation.
You need import LineChart and Line components from Recharts, because this library does not have default exports Recharts index
import { LineChart, Line } from 'recharts';
Update
also you need change dataKey, from 'uv' to 'value' because in data you use value as key for chart values
Example