I'm not sure which way I' supposed to import React in my React Native app.
If I need to use a hook like useState should I import React with: import React, { useState } from 'react';, import { useState } from 'react';, import * as React from 'react';, or import * from 'react';?
If I don't need any hooks should I use: import React from 'react';, import 'react';, import * as React from 'react';, or import * from 'react';?
As of react version 17+, you don't need to import React from 'react' anymore. Read more about the JSX transformation.
Hooks are named exports, so you need to import hooks as:
import {useState, useEffect /* and others */} from 'react'
If you are using a react version below 17, you need to import React. Since React would be a default import these are all refer to the same thing:
import React from 'react'
import * as React from 'react'
So you should do import React, {/* hooks you are using */} from 'react'.
You can even do import * as Whatever from 'react', since it is not a named export.
I would like to know how to solve this problem.
You got this suddenly, and I still haven't found a solution!
my app_tsx
import type { AppProps } from "next/app";
import React from "react";
// styles
import "../node_modules/bootstrap/scss/bootstrap.scss";
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/perspective-subtle.css";
import "tippy.js/themes/light.css";
import "../styles/globals.scss";
import "react-toastify/dist/ReactToastify.css";
// components
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';
the problem I try to solve
import * as React from 'react';
import {Component} from 'react';
I dont like it being two lines - to be frank it is not even allowed by my linter settings.
But writing the following
import * as React from 'react';
const Component = React.Component;
doesnt look fine to me as welll - as I willl have llines of imports and than const delarations - which are actually imports
in a non TS syntax the above lines could have been
import React, {Component} from 'react';
and this is what I am looking for, but
import * as React, {Component} from 'react';
is not a valid syntax.
The question
how can I acchieve a one liner with namespace import and partial import
Starting from TypeScript 2.7, you can enable esModuleInterop in your tsconfig.json to enable import React, { component } from 'react'
There is a specific meaning for import * as React from 'react', which is getting the module namespace object of the module react.
As it gets everything in the module, it is more natural to use React.component then extracting component using the import { component } from 'react' in addition.
I'm very clearly loading and using React up until the point where it can't find it.
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-container';
import { UI } from 'touchstonejs';
import VoteContainer from '../components/vote-container.js';
import Solution from '../components/solution.js';
import moment from 'moment';
module.exports = React.createClass({
addSolution () {
var solution = ReactDOM.findDOMNode(this.refs.solution).getElementsByTagName('input')[0].value,
^~~~ ReactDOM is not defined
But! Once I run addSolution , then React and ReactDOM are inaccessible. How does this variable suddenly get lost? What might I be doing to lose it?
This is the button that would call it within this class' render method..
<UI.Button type="primary" onTap={this.addSolution} >
Send
</UI.Button>
Since v0.14, ReactDOM got separated to another package and given that findDOMNode is part of ReactDOM, in order to use it within your components you have to include it. For example:
import React from 'react';
import ReactDOM from 'react-dom';
/* ... */
module.exports = React.createClass({
addSolution: function() {
ReactDOM.findDOMNode(...)
}
})