Erreur : impossible d'utiliser l'instruction d'importation en dehors du module React

Question

Je viens de commencer à apprendre React. J'ai suivi les étapes du guide de démarrage sur https://react.dev/learn/add-react-to-an-existing-project, mais je continue à recevoir l'erreur : Impossible d'utiliser l'instruction d'importation en dehors d'un module.

Ce que j'ai fait, c'est : Exécutez d’abord dans le terminal : npm init -y npm install React React-dom

Ensuite, j'ai créé un fichier index.js et copié le code fourni dans le guide : `importer {createRoot} depuis 'react-dom/client' ;

// Effacer le contenu HTML existant document.body.innerHTML = '';

// Rendu votre composant React const root = createRoot(document.getElementById('app')); root.render(

Bonjour tout le monde

);`

Mais ça n’a pas fonctionné.

Presque toutes les solutions sur Internet me disent d'ajouter "type": "module dans le fichier package.json. Je l'ai ajouté mais l'erreur persiste.

Voici comment je l'ai ajouté : { "name": "project", "devDependency": { "vite": "latest" }, "scripts": { "type": "module", "start": "vite", "dev": "vite", "build": "vite build", "preview": "vite 预览" }, "type": "module", "description": "快速启动:", "version": "1.0.0" , "main": "index.js", "author": "", "license": "ISC", "dependency": { "react": "^18.2.0", "react-dom": "^ 18.2.0" }, "关键字": [] }

L'ajout de

à l'intérieur de la balise script ne fonctionne pas non plus : "type": "module En fait, après avoir ajouté ceci, React s'est complètement écrasé car il montrait qu'il ne reconnaissait pas le symbole '<'...

Ce que j'ai essayé et fait, ce n'est pas de télécharger React, mais de me connecter au CDN et d'utiliser Babel. Mais d'après le cours gratuit que je suis, utiliser un CDN n'est pas un bon moyen d'utiliser React.

Je suis totalement perdu. Quelqu'un peut-il m'aider ?

Answer 1

Vous devez ajouter "type": "module" dans l'objet de niveau supérieur, pas dans l'objet "scripts".

Le contenu de l'objet "scripts" est accessible via npm run <x>来访问，其中<x> est la clé de l'objet "scripts".

{ "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": [] }