Question 228061 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot use import statement outside a module Error for React

I am just beginning to learn React. I followed the steps on the starting guide in https://react.dev/learn/add-react-to-an-existing-project, but I keep getting the error: Cannot use import statement outside a module.

What I did is:
First in terminal:
npm init -y npm install react react-dom

I have then created a index.js file and copied in the code provided by the guide:
`import { createRoot } from ‘react-dom/client’;

// Clear the existing HTML content
document.body.innerHTML = ”;

// Render your React component instead
const root = createRoot(document.getElementById(‘app’));
root.render(

Hello, world

);`

But it didn’t work.

Almost all solutions on the Internet tells me to add "type": "module in the package.json file.
I did add it, but the error persists.

This is how I added it:
{ "name": "project", "devDependencies": { "vite": "latest" }, "scripts": { "type": "module", "start": "vite", "dev": "vite", "build": "vite build", "preview": "vite preview" }, "type": "module", "description": "Quick start:", "version": "1.0.0", "main": "index.js", "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "keywords": [] }

Adding "type": "module inside the script tag did not work either:
<script type="module" src="index.js" defer></script>
actually after adding this, react completely breaks as it shows it does not recognise the token ‘<‘…

What I have tried and indeed worked is to not actually download react but insert the CDNs and using babble. But according to the free course that I am following, using CDN is not the good way to use react.

I am completely lost. Could someone help?

Tags:

2

Answers


  1. 0

    You need to add "type": "module" in the top level object, not in the "scripts" object.

    Things inside the "scripts" object can be accessed with npm run <x> where <x> are the keys in the "scripts" object

    { "name": "project", "type": "module", "devDependencies": { "vite":
    "latest" }, "scripts": { "start": "vite", "dev": "vite", "build":
    "vite build", "preview": "vite preview" }, "type": "module",
    "description": "Quick start:", "version": "1.0.0", "main": "index.js",
    "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0",
    "react-dom": "^18.2.0" }, "keywords": [] }

    Login or Signup to reply.
  2. 0

    Your question is hard to reproduce because you haven’t included the index.html file or any other JavaScript file from your project. You’re following a guide of "how to add React to an existing project" so it’s possible you have a problem somewhere else.

    From what you’ve shared, it’s possible the problem is how you’re rendering the page. Note my comments below.

    This environment seems to work:

    <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <script
            type="module"
            src="index.js"
            defer
        ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

    // index.js
import { createRoot } from "react-dom/client"

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>'  // In your question, you haven't properly reset the page.
                                                  // You need to replace the innerHTML with a div that a React component can mount to

// Render your React component instead
const root = createRoot(document.getElementById("app"))
root.render("Hello, world")

    // package.json
{
    "name": "project",
    "devDependencies": {
        "vite": "latest"
    },
    "scripts": {
        "type": "module",   // <- you should remove this line. "module" is not command so the "type" command won't do anything
        "start": "vite",
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "type": "module",
    "description": "Quick start:",
    "version": "1.0.0",
    "main": "index.js",
    "author": "",
    "license": "ISC",
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    },
    "keywords": []
}

    You can start the proejct

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search