SyntaxError: Unexpected token '<' React-CodePudding

It's been days I've been trying to run react without a CDN, first I've got the error "Uncaught SyntaxError: Cannot use import statement outside a module", that I solved by using .mjs instead of .js.

But now, I'm this new error that I'm unable to solve.

Here is my JS code :

import { React } from 'react';
React = require('react');
import { ReactDOM } from 'react-dom';
ReactDOM = require('react-dom');


function Page () {
    return (
     <div>
     <h1>Test</h1>
     </div>  
    )
}


ReactDOM.render( <Page />,document.getElementById("root"))

My HTLM code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.mjs"></script>
</body>
</html>

The console error :

Debugger attached.
Waiting for the debugger to disconnect...
file:///c:/Users/Tristan/OneDrive/Bureau/REACT/InstallTest/index.mjs:9
     <div>
     ^

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:117:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:337:14)
    at async link (node:internal/modules/esm/module_job:70:21)

I don't know if those infos are enough to find a solution.

CodePudding user response：

Why not use a build tool such as Vite or Create-React-App? It will handle all of this for you, and provide you with a boilerplate template. Configuring all of this stuff manually is unnecessary.

CodePudding user response：

Here my Package.json :

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "vite": "^3.0.0"
  }
}

CodePudding user response：

Oh yes, I didn't precise it, but I used vite to set up my app, the error remained.