I have started my first React lesson but I cant see any output on my localhost(3000), will you pls help me ?
this is my JS code :
import React from 'react';
import ReactDOM from 'react';
const element = React.createElement("div", { id: "title", className: "app-title" }, "this is a test text");
ReactDOM.render(element, document.getElementById("root"));
Look at the Console in your browser's developer tools. When I run this code it says:
Uncaught TypeError: _reactDefault.default.render is not a function
So something is wrong with the object you call render on. That clues us into looking at the place it is defined.
import React from 'react';
import ReactDOM from 'react';
You've imported react twice and assigned it to different variables. That doesn't make a whole lot of sense.
So go back and check the tutorial you are working from.
You should see that ReactDOM should be imported from 'react-dom' and not 'react'.
import React from 'react';
import ReactDOM from 'react-dom';
So I'm new to React.
I want to style a simple text and found out how to use styles, but when I want to change something in the CSS I have to restart my React App which always takes 3 Minutes.
I use npm start to start the React server that was created with create-react-app.
How can I let React update when the CSS file is changed?
I have an index.js that looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './Frontend/App.js';
import './Frontend/style/main.css';
ReactDOM.render(<App/>, document.getElementById('root'));
And an App.js that looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style/main.css';
class App extends Component {
render() {
var pageHeading = (
<h1 className="pageHeading">bosleeir.it</h1>);
return pageHeading;
}
}
export default App;
Remember that you need to import your CSS in your component. I wouldn't recommend to do it on index.js
I'm assuming your folder structure is:
which could lead me that:
You're using an older version of React
You have modified the structure of your files
So double-check if the path are configured correctly.
I want to conditionally import react-devtools based on an environment variable but eslint says that I can't import in the body of the module when I try to import react-dom
react-devtools requires that I import it before react-dom so what do I do?
import React from 'react';
import env from 'react-dotenv'
const _temp = env.DEV === "true" && import ("react-devtools");
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil'
It gives errors on the last three lines. How do I resolve this?
I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element
The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;
You need to import React in every file that exports a component (App in this case).
The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850
I have the same error as this answer, except instead of it just occurring in one file it is occurring in many; once I fix it for one file, another just pops up with the same error. I've seen this answer but whenever I run react-scripts start a node_modules folder is created in my src, so that solution isn't viable.
It would be too time consuming to have to fix every file that has this error every time I compile, so how can I get rid of this error? It seems to just be an eslint issue.
you will get this error if you declare variable in between your imports,
import React from 'react';
import axios from 'axios';
const URL = process.env.REACT_APP_API_BASE;
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';
declare variables after importing everything,
import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';
const URL = process.env.REACT_APP_API_BASE;
I found this issue while I was using React.lazy in my existing project. I got this error Failed to compile. :- Import in body of module; reorder to top import/first (with create-react-app).
import React from 'react';
import SelectField from '../inputs/SelectField';
const Questions = React.lazy(() => import('./questions'))
import _ from 'lodash';
Solution:-
Only reorder the position i.e. put all import on top then react.lazy.
import React from 'react';
import SelectField from '../inputs/SelectField';
import _ from 'lodash';
const Questions = React.lazy(() => import('./questions'))
I got this same error when I added an extra semicolon ';' at the end of an import statement.
I suggest removing any extraneous semicolons. This should make the error go away.
Moving every import statement to the top of the file solves the issue.
Happened to me when I put require before import like this:
require('dotenv').config()
import React from 'react';
import ReactDOM from 'react-dom';
...
Solution: Put the require after the imports
If You are using Component Lazy loading then always put lazy load component import code below normal import code.
Correct Example
import First from './first'
const Second = React.lazy(()=>import("./Second))
Incorrect Example
const Second = React.lazy(()=>import("./Second))
import First from './first'
I came across this issue too. I found that you must import all ES6 modules at the top level of your JavaScript files."... the structure of ES6 modules is static, you can’t conditionally import or export things. That brings a variety of benefits.
This restriction is enforced syntactically by only allowing imports and exports at the top level of a module:"
From Dr. Axel Rauschmayer’s Exploring JS:
Wrong
1.
import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase"
Right
2.
import React ,{useState ,useEffect} from 'react';
import './App.css';
import Post from './Post';
import db from "./firebase.js"
//this is code firebase.js
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export default {db,auth,storage};
When I change the firebase into firebase.js in Snippet 2.
My Error vanished
I had forgotten to add from.
Before:
import UpperBlock;
After:
import UpperBlock from "../components/dashboard/shared/UpperBlock";
Make sure you import well your component and then stop the server and restart it again. It worked for me.
I forgot to add {Component} after importing 'react' library to my project, this solved my issue.
Move all of your imports to the top of the file.
Even in case of a require (that is written in between import statements), this error will come.
e.g.
import 'some_module';
require('some_file');
import 'some_other_module');
This would result in an error.
You would want to do this instead:
import 'some_module';
import 'some_other_module');
require('some_file');
I was facing the same issue when I installed chat.js library in my reactJs project. I solved this issue by moving my chart.Js import to the index.js file
index.js file:
import React from "react";
import ReactDOM from "react-dom";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; <--- imported
import "./index.css";
import App from "./App";
ChartJS.register(ArcElement, Tooltip, Legend); <---- imported
If you're experiencing this error in modern versions of react(current version 18.0.0) make sure you're making all your imports before the ReactDOM.createRoot declaration.
For example, I got the error with:
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
import { Provider } from "./context";
This will result in an error. Instead, import everything before the createRoot:
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "./context";
const root = ReactDOM.createRoot(document.getElementById("root"));
This will fix the error. Simple fix but it's easy to miss
If I put double Semicolon behind the importing statement than I got "error".you can see difference between two pictures in import './index.css'; is different
For Example :-
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';;
import 'tachyons';
import {robots} from "./Robots";
import reportWebVitals from './reportWebVitals';
import CardList from './CardList';