SyntaxError: Unexpected token '<' React

Question

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.

Are you building your react app and hosting the contents of the build output directory? — GBourke
– GBourke, Commented Jul 13, 2022 at 16:33
Yes, this is what I'm doing, and for hosting content, I'm actually not sure. This is my first React app, but I assume using Vite everything is set up automatically right ? — Tristanguimard
– Tristanguimard, Commented Jul 13, 2022 at 16:48
Very confused as to what you are doing and what you are trying to achieve. Are you trying to host your application (as in build the project and upload to some hosting service) or are you trying to run it locally? If locally, are you trying to run distribution code or the development code? Perhaps update the question with your run/host steps — GBourke
– GBourke, Commented Jul 13, 2022 at 17:42
You're right, I think I spotted the problem. I'm running it locally and I saw the following message on my terminal : "npm WARN config global --global, --local are deprecated. Use --location=global instead." — Tristanguimard
– Tristanguimard, Commented Jul 13, 2022 at 18:01
I´ve soldved the hosting problem but remains the syntax one. — Tristanguimard
– Tristanguimard, Commented Jul 13, 2022 at 19:37

Kyle Kingsberry · Accepted Answer · 2022-07-13 16:25:21Z

1

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.

answered Jul 13, 2022 at 16:25

Kyle Kingsberry

931 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tristanguimard · Accepted Answer · 2022-07-13 16:32:03Z

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

Collectives™ on Stack Overflow

SyntaxError: Unexpected token '<' React

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related