I'd like to try out some of the new Concurrent Mode features in React 18. The official documentation, as well as several articles, claim that you just need to install react#experimental react-dom#experimental. I have done so but I am met with the following error:
Property 'unstable_createRoot' does not exist on type 'typeof import("C:/my-app/node_modules/#types/react-dom/index")'. TS2339
> 10 | ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
| ^
This is my trying to add this import to an existing project that is already working, not a new project from scratch
EDIT2: Here is my code:
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
That's a Typescript error/warning. (If you are not using Typescript, it's your editor using it behind the scenes.)
Your #types/react package doesn't have the unreleased experimental function you're trying to use.
See the comments in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/experimental.d.ts#L2 to see how to bring the experimental bits into scope.
Related
I want to use reactDOM for injecting content to page. So, I want to
import React from 'react';
...
import App from './src/js/App';
const root=createRoot(document.getElementById('title'));
root.render(
<App/>
);
included into my background.js but I get the following
error: SyntaxError: Cannot use import statement outside a module
Import that is causing the error:
import React from 'react'
I've done some research and tried adding type: "module" but that does not work.
What can I do to solve this?
Facing pretty similar issues atm, digging SO for a while.
Try to play around with
import React from './react.js'; // path and file extension here
or
import * as React from './react.js'; // another import option
Also, ensure you have manifest v3 in order type: "module" to work.
After many research,
I did npm run eject
here is the working react setup
https://github.com/rba1aji/chrome-extension-template-react
I created a new React JS app using the Visual Studio 2022 Project Template "Standalone JavaScript React Template"
When I run the project I see the react logo just like when you use "create-react-app" (I'm assuming that Visual Studio 2022 creates the project in the same way)
I want to use Bootstrap in my project so I installed the module by going to the root directory of the project and typing "npm install bootstrap" I can see that the module is installed in the package.json
When I try and import bootstrap in my index.js using this line:
import "/bootstrap/dist/css/bootstrap.min.css";
Then run the app I get this error:
Module not found: Error: You attempted to import /bootstrap/dist/css/bootstrap.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/
My question is what is the correct way to import and use bootstrap in my project, did I install it in the right way or is there a diffrent method?
This is my full index.js file for clarity:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "/bootstrap/dist/css/bootstrap.min.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
UPDATE: See sctructure of project
Multiple people (like asked here) have asked the same question but I couldn't resolve my problem as almost all the solutions asked me to check for mistakes while importing but I am sure I went through all of them but couldn't find anyone that made sense to me. My code used to be much bigger but as someone mentioned in the solution to the post I have tagged previously, I created a new app using CRA and imported things one by one only to realize that this error started appearing as soon as I imported the routing method as mentioned in my code.
I am aware that this error is pointing to the broken symlinks in my system as mentioned in some other posts(also pointed to another symlink when I previously ran my code) but I am trying to find a way to resolve this without damaging my system by deleting symlinks.
After using CRA to make a new app I tried to run this code which worked fine until I imported Router.
edit: As soon as I removed routing from my initial project (which had multiple components ) it got fixed. I need to figure out a way to route this now.
My index.js CODE :
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import {BrowserRouter as Router} from'react-router-dom';
render(
<Router>
<App />
</Router>,
document.getElementById('root') );
My App.js CODE :
import React from "react";
function App()
{
return(
<h1> hello world </h1>
)
}
export default App;
PS: Thank you for reading my post, please post your solutions or links that might help.
You are probably missing #material-ui/icons
Try to install it
npm install #material-ui/icons
In my case an import statement was missing a file. Check your import statements. It actually shows what's missing for a second on the Compiling... screen after npm start
I tried to develop my first Shopify module but when i use React i have this error in my application page on the shop.
Here my index.js
import {Page} from "#shopify/polaris";
import {RessourcePicker} from "#shopify/app-bridge-react";
class Index extends React.Component{
state = {open: false}
render() {
return (
<Page
title="Product selector"
primaryAction={{
content:'Select products',
onAction: () => this.setState({open:true})
}}
>
<RessourcePicker
ressourceType='Product'
open={this.state.open}
/>
</Page>
)
}
}
export default Index;
Shopify allows its users to determine their own React version, hence Shopify wouldn't deploy React for you and lock you on a version you might not be interested in using. You can see how Shopify defines React as a peer-dependency so the responsibility of deploying and importing React is on the user.
I think that in your case, what you might be missing is deploying React as a dependency on your package.json, and import it as follows:
import React, { Component } from "react";
I ran into the same issue with their tutorial, I went in to the package.json and changed the dependency,
"react": "^16.9.0",
"react-dom": "^16.9.0"
Then I went to my terminal and installed react again:
npm install next react react-dom
now its working fine.
You do not need to add the import.
You should use
import React from "react";
To be safe from this type of errors. If any of your previously defined imports do import React import React will not work.
But I recommend it to just be safe
ReferenceError: Can't find variable: Set (react.js Only in safari this error is coming) on all other browsers its working perfect but in safari throwing this error showing error in main.js which was build by react when i run this command
(npm run build)
You should consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.
Run npm install core-js or yarn add core-js and import your specific required features, like so:
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
More info: https://reactjs.org/docs/javascript-environment-requirements.html
You can add import "core-js/fn/set"; into your pollyfill.js file, in order to support old browsers.
Note: Please install "core-js" package incase you don't have.