Develop Reference

React index.js Unknown word

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 can't use createRoot function in react-dom/client

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)

Typescript react esbuild unable to build

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.

create-react-app and TypeScript error: 'React' must be in scope when using JSX

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

Module not found: Error: Cannot resolve module 'routes'

I'm following Cory House's pluralsight course on building React in ES6. Unfortunately I'm stuck on one of the first couple steps, setting up the basic components.
In the console I see the following error message:
Warning: [react-router] Location "/" did not match any routes
If I look in my dev server I see the following
ERROR in ./src/index.js
Warning: [react-router] Location "/" did not match any routes
Then below that I see that eslint has kicked out the following error:
C:\Projects\es6react\src\index.js (1/0)
✖ 5:9 routes not found in './routes' import/named
So this should be pretty straightforward. However, looking at my directory structure, index.js file and routes.js nothing stands out... even after about 30 minutes.
index.js
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {routes} from './routes';
import './styles/styles.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
);
routes.js
import React from 'react';
import {Route,IndexRoute} from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
export default(
<Route path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="about" component={AboutPage}/>
</Route>
);
Directory structure
And just in case my scripts section from my package.json:
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src":"babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test":"mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch"
},

You are using default export, you need to import it as default (without curly braces):
import routes from './routes';
On the other hand you can use named export and import it by name:
// index.js
export const routes = ...
// routes.js
import {routes} from './routes';

Because you are doing default export from routes.js file not named export, and importing it as named export.
Use this:
import routes from './routes'; //remove {}

You have used 'export default' in routes.js, this means that to import it you need to use:
import routes from "./routes";
In your code you have used {routes} which would import when exported without the default.