import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById("root");
// This opts into the new behavior!
ReactDOMClient.createRoot(rootElement as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
If this code is executed, the error happens like following.
Could not find a declaration file for module 'react-dom/client'. 'E:/Workspace/React/welcomedev-react-starter/node_modules/react-dom/client.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-dom if it exists or add a new declaration (.d.ts) file containing declare module 'react-dom/client';
1 | import React from 'react';
2 | import * as ReactDOMClient from 'react-dom/client';
| ^^^^^^^^^^^^^^^^^^
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
I want the answer.
Be sure you have the correct types versions installed. Try running:
npm install --save-dev #types/react#18 #types/react-dom#18
Don't rely on your IDE to pick up everything correctly. In my case I had to manually type the import and use createRoot like this:
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root')!); // notice the '!'
root.render(<App />);
Notice how you need to tell typescript that you are sure your root won't be null with the exclamation mark ('!'). See more info in 'Updates to Client Rendering APIs'
I got this example from https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);
Have you tried createRoot(container!) ?
If you are using typescript with react, then you need to import relative dependencies that support types and meets other typescript condition.
So try running the command npm i --save-dev #types/react-dom
And in case you are working with dependencies that doesn't support typescript then you can get around with this method. Hope this helps.
Typescript. What to do if module doesn't have #types?
Using ReactDOM before createRoot() does solve this issue.
Example-
ReactDOM.createRoot(rootElement)
Related
I have an index.js file in my root directory but whenever I run npm start i get an Unknown word in index.js error.
How do I fix this problem? Looked online but can't seem to get it running. Since there is very little info about this error.
//index.js
import {createRoot} from 'react-dom/client';
import App from './App'
const root = createRoot(document.getElementById('root'));
root.render(<App />)
can you try this way
import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
You should use render method imported from 'react-dom'
// index.js
// import {createRoot} from 'react-dom/client';
import ReactDOM from 'react-dom';
import App from './App'
// const root = createRoot(document.getElementById('root'));
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
I just found the cause of this error. It was due to an autocompletion mistake. I have a global css file where I set up the css variables I use in this project such as font and background colors.
Said file needs to be imported into the css files that want to access given variables.
/* How it should look like */
#import url('../../../vars.css');
/* How it's not supposed to look like */
#import url('../../../index.js');
I accidentally autocompleted the index.js into the import statement which resulted in the error.
I want to build a package and upload it to npm so I tried to create a demo package first.
I used this repo as a starter package: https://github.com/wobsoriano/vite-react-tailwind-starter
and updated the build script to this
"build-test": "esbuild src/App.tsx --bundle --minify --outfile=src/dist/index.js",
and the App.tsx i updated to this
import React from "react";
import "./index.css";
const App = () => {
return <div>My Dummy</div>;
};
export default App;
Then I tried to build it and import it in my main.tsx like this:
import React from "react";
import ReactDOM from "react-dom";
import App from "./dist/index.js";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
And then I get this error:
The requested module '/src/dist/index.js' does not provide an export
named 'default
I only can give you a quick manual fix. For some reason the index.js file has no "export default" keywords, but you can open the src\dist\index.js file and you can just insert the "export default " at the very begin. So the begin will look like this:
export default ()=>{var K=Object.create;var _=Object.define.
Because the whole index.js just a function, you can do this.
I initialised a React project with TypeScript using the CLI command create-react-app client --typescript. Then, I ran npm start but received the following compilation error:
./src/App.js
Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope
I did not even modify the boilerplate project provided by create-react-app other than removing unnecessary logo files, and my previous React apps done using TypeScript compiled just fine. Below is my App.tsx and index.tsx file: (note that the logo in App.tsx was removed, and I did not touch index.tsx)
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
App.tsx:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Lorem
</div>
);
}
export default App;
React and ReactDOM are imported, so what caused this error?
Edit:
I found out that npm start, which runs react-scripts start, is compiling my .tsx files into .js files, which probably caused this issue. What might have caused the above behaviour?
try
const RootApp:React.FC = () => {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}
render(<RootApp />, document.getElementById("root"));
I am totally new to React and i'm following tutorials (Programming with MOSH) in youtube but i'm stuck with this error, unable to resolve after finding similar questions.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import Counter from './components/counter';
//import * as Counter from './components/counter'; //tried this method too
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1> Hello world</h1>;
}
}
export default Counter;
in command prompt i had done npm install and npm start after deleting package-lock.json but still the same error
folder structure
Thanks in advance.
Move your components folder inside the SRC this will fix it
Either move components folder inside src folder or change the reference in the import statement to '../component/counter'
I am using airbnb extension for linting my React Project. Now, in my index.js I have:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
linter says:
no-undef 'document' is not defined.at line 8 col 3
How can I solve this problem?
There are a number of ways to solve/get around this. The two key ways are to either specify document as global or to set the eslint-env as browser (what you probably want). You can do this 1) in-file, 2) in the configuration, or even 3) when running from the CLI.
1) In-file:
Set the environment as browser in your file:
/* eslint-env browser */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
Add it as a global in the file itself:
/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'),
);
2) In the eslint configuration:
Set the environment as browser in the configuration:
{
"env": {
"browser": true,
"node": true
}
}
Add it as a global in the configuration:
{
"globals": {
"document": false
}
}
3) From the CLI:
Using env: eslint --env browser,node file.js
Using globals: eslint --global document file.js
Resources:
Specifying Globals with ESLint
Specifying Environments with ESLint
Specifying env with ESLint CLI
Specifying globals with ESLint CLI