React Suspense Concurrent Mode Not Working - reactjs

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";

Related

How to use the react concurrent mode

I have installed the "yarn add react#experimental react-dom#experimental",and use the unstable_createRoot,but have the error with start.
this is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App/>);
the result :
Uncaught TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.unstable_createRoot is not a function
so help it work

How to configure react.js and react-dom.js dependencies?

I am new to react and I am not able to configure it correctly the command
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(--,--)
is not working even after the locations are given correct.
If you are using create-react-app then don't need to such setup n all.
just create project and start working on that.
Quick Start
npx create-react-app my-app
cd my-app
npm start
for proper understanding and learning. please go through reactjs docs
Sample app
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <div>Hello</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

react-key-index sample example does not work

I would like to use react-key-index extension in order to generate unique id's.
I was trying to implement their sample example, but no matter what I do, it still throws me the same error:
TypeError: Hashids is not a constructor
link: react-key-index npmjs
Here is that pretty simple example:
App.js:
import React from 'react';
import keyIndex from "react-key-index";
import './App.css';
function App() {
let arr = ["one", "two", "three"];
arr = keyIndex(arr, 1);
const list = arr.map(arr => <li key={arr.id}>{arr.value}</li>);
return <ul>{list}</ul>;
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Please, do you have any idea where do I do a mistake? I am trying to set it going in completely new react project (create-react-app). From my point of view i have implemented it correctly (but obviously i have not).
And here is how that error looks like in the browser:
Have you run npm install or perhaps npm install --save hashids? hashids is a dependency of that npm package: https://www.npmjs.com/package/react-key-index
The require('hashids'); should load up that NPM package if you have it installed; if it doesn't find it, I would expect an error like this.
You seem to be using an older version of react-key-index
Try using V0.1.1 and check if that works for you.
I tried it with React 16.8.6 and it seems to be working well for me.
Here's a Working Sample CodeSandbox for your ref.

ReactJS Import react from 'react' issue

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'

Errors importing React-Router, using create-react-app

I'm trying to use react-router with the create-react-app I just created but I'm having issues importing it. I'm importing it like I import the other react dependencies:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link } from 'react-router-dom';
but I'm getting this error message:
./src/index.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users\Eric\Code\react-test\src'
I've tried googling and checking on here but I can't find an answer. Why isn't it looking in node_modules?
Install react-router-dom.
I got this error message because I had followed an old tutorial that had me installing the react-router packager instead of react-router-dom package. Couldn't figure it out for a little bit.
To solve this issue, just install react-router-dom:
npm install --save react-router-dom
All set!

Resources