I have some react code and have some stylecop issue with the below line complaining that "module has no default export".
import React from 'react'
I changed the above line to the below to fix it.
import * as React from 'react'
I have similar situation for the below import
import React, { Component, abc} from 'react'
I update import to below but it fails
import * as React, { Component, abc} from 'react'
What will be the real way to import multiple items
rm -rf node_modules
rm -rf package-lock.json
npm i
try this command and check working or not,
proper way of importing react is
import React from 'react'
Related
I am trying to use react suspense but I am facing some issue regarding rendering after making changes in react index.js file and I already installed react suspense "npm install react#experimental react-dom#experimental"
My index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
Index.js file
Error
TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
Error Image
To anyone updating an old React App, the React support doc on React 18 says to write ONLY:
npm install react react-dom
for the React 18 update.
I had two React 16 apps I wanted to update.
To do so, I first updated to React 17:
npm install react#17.0.0 react-dom#17.0.0
ONLY AFTER this version is installed properly, you are able to install to 18, specifying the version in the installation command:
npm install react#18.0.0 react-dom#18.0.0
After that,
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
works just fine.
Follow the version update on your 'package,json' file.
In order to works is required to use ReactDOM.unstable_createRoot
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
change -> import ReactDOM from "react-dom";
to -> import ReactDOM from "react-dom/client";
I have an action folder inside the src folder as you can see in above pic. I have component file in which I have import statements as below.
import React from "react";
import { connect } from "react-redux";
import "./Login.css";
import * as LoginAction from "../../actions/loginAction";
import rp from "request-promise";
import "bootstrap/dist/css/bootstrap.min.css";
But I am getting error as
/src/Components/LoginComponent.js
Module not found: You attempted to import ../../actions/loginAction which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Can you please help to find what is wrong here. Thanks in advance.
When you use ../.. you're trying to access to the parent of parent folder. That's why now you're out of the src folder. And this import is not currently supported.
In your code, try to modify:
import * as LoginAction from "../../actions/loginAction";
to something like one of the followings:
import * as LoginAction from "../actions/loginAction";
import * as LoginAction from "./action/loginAction";
import * as LoginAction from "../redux/actions/loginAction";
I want to use import React from "react" in typescript, but I have to use import * as React from "react", otherwise can't recognize the 'react' package of nodemodules
try setting allowSyntheticDefaultImports: true in your ts-config. It will fix the above error.
You are doing it wrong.
The import should be
import React from 'react';
With a capital R
The reason why import * as react from "react"; works because it specifies that everything should be imported from "react" package and it should be given an alias of react.
If you already tried the above import, you can try the allowSyntheticDefaultImports compiler flag as mentioned here.
You can learn more about it here
For me
import React from 'react';
doesn't work. I get the following error
Module ".../node_modules/#types/react/index"' can only be default-imported using the 'esModuleInterop' flagts(1259)
index.d.ts(55, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.
So I'm going with
import * as React from 'react';
I've to use bootstrap-select, bootstrap, jquery, popper, isotope, wow and a script file that uses all these libs with Gatsby. I did like this in layout.js:
import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import "bootstrap/dist/css/bootstrap.min.css"
import "./vendors/themify-icon/themify-icons.css"
import "font-awesome/css/font-awesome.min.css"
import "./vendors/flaticon/flaticon.css"
import "animate.css/animate.min.css"
import "./vendors/magnify-pop/magnific-popup.css"
import "./layout.css"
import "./responsive.css"
import "jquery/dist/jquery.min.js"
import "popper.js/dist/popper"
import "bootstrap/dist/js/bootstrap.min.js"
import "bootstrap-select/dist/js/bootstrap-select.min.js"
import "wowjs/dist/wow.min.js"
import "jquery.scroll-parallax/dist/js/jquery.scrollParallax.js"
import "./vendors/isotope/isotope-min.js"
import "./vendors/magnify-pop/jquery.magnific-popup.min.js"
import Loader from "./loader"
import Header from "./header"
import Breadcrumb from "./breadcrumb"
Is this a correct way to import all these dependencies ?
During gatsby develop I am not sure it works or not but I am not getting any errors. During gatsby build it failed. So, I copied all these files to static and build passed.
Then I checked for all these files in common.js but not a single file code is there. How do I use all these dependencies with Gatsby ?
I am trying to implement hooks into a React (^16.6.0) application using TypeScript
import * as React, {useState} from 'react';
Any idea what is the right syntax for this import?
import supports a limited set of syntax variations.
It can be:
import React, {useState} from 'react';
The downside is that entire library is imported, because React is default export and cannot be tree-shaken. Since the presence of React import is needed to use JSX syntax, a more efficient way is:
import * as React from 'react';
import {useState} from 'react';
Hooks were introduced in pre-release React 16.7. react version constraint should be ^16.7.0-alpha.0, #types/react should be ^16.7.0.
I had the same error on "#types/react": "^16.8.17". Looking at it's type def file, it was missing the useState function for some reason, though it was mentioned in the comments of other hooks like useReducer.
Upgrading to "#types/react": "^16.8.18" with npm i #types/react#latest fixed it.