Fehler: Die Importanweisung kann nicht außerhalb des React-Moduls verwendet werden

Question

Ich habe gerade angefangen, React zu lernen. Ich habe die Schritte aus dem Leitfaden „Erste Schritte“ unter https://react.dev/learn/add-react-to-an-existing-project befolgt, erhalte jedoch weiterhin die Fehlermeldung: Die Importanweisung kann nicht außerhalb eines Moduls verwendet werden.

Was ich getan habe war: Führen Sie zunächst im Terminal aus: npm init -y npm install React React-dom

Dann habe ich eine index.js-Datei erstellt und den in der Anleitung bereitgestellten Code kopiert: `importiere {createRoot} aus 'react-dom/client';

// Vorhandenen HTML-Inhalt löschen document.body.innerHTML = '';

// Rendern Sie Ihre React-Komponente const root = createRoot(document.getElementById('app')); root.render(

Hallo Welt

);`

Aber es hat nicht funktioniert.

Fast alle Lösungen im Internet fordern mich auf, "type": "module in die package.json-Datei einzufügen. Ich habe es hinzugefügt, aber der Fehler bleibt bestehen.

So habe ich es hinzugefügt: { "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" }, "关键字": [] }

Das Hinzufügen von

innerhalb des Skript-Tags funktioniert ebenfalls nicht: "type": "module Tatsächlich stürzte React nach dem Hinzufügen vollständig ab, da angezeigt wurde, dass das Symbol „<“ nicht erkannt wurde...

Was ich versucht habe und funktioniert habe, war, React nicht wirklich herunterzuladen, sondern mich an das CDN anzuschließen und Babel zu verwenden. Aber laut dem kostenlosen Kurs, den ich besuche, ist die Verwendung eines CDN keine gute Möglichkeit, React zu nutzen.

Ich bin völlig verloren. Kann jemand helfen?

Answer 1

您需要在顶层对象中添加"type": "module"，而不是在"scripts"对象中添加。

"scripts"对象中的内容可以通过npm run <x>来访问，其中<x>是"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": [] }