Ralat: tidak boleh menggunakan pernyataan import di luar modul React

Question

Saya baru mula belajar React. Saya mengikuti langkah-langkah daripada panduan permulaan di https://react.dev/learn/add-react-to-an-existing-project, tetapi saya terus mendapat ralat: Tidak boleh menggunakan pernyataan import di luar modul.

Apa yang saya lakukan ialah: Mula-mula laksanakan di terminal: npm init -y npm install React React-dom

Kemudian saya mencipta fail index.js dan menyalin kod yang disediakan dalam panduan: `import {createRoot} daripada 'react-dom/client';

// Kosongkan kandungan HTML sedia ada document.body.innerHTML = '';

// Render komponen React anda const root = createRoot(document.getElementById('app')); root.render(

Hello, world

);`

Tetapi ia tidak berjaya.

Hampir semua penyelesaian di internet menyuruh saya menambah "type": "module dalam fail package.json. Saya telah menambahnya tetapi ralat berterusan.

Beginilah saya menambahkannya: { "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" }, "关键字": [] }

Menambah

di dalam teg skrip juga tidak berfungsi: "type": "module Sebenarnya, selepas menambah ini, React ranap sepenuhnya kerana ia menunjukkan tidak mengenali simbol '<'...

Apa yang saya cuba dan lakukan adalah untuk tidak memuat turun React tetapi memasang CDN dan menggunakan babel. Tetapi mengikut kursus percuma yang saya ambil, menggunakan CDN bukanlah cara yang baik untuk menggunakan React.

Saya benar-benar tersesat. Ada sesiapa boleh tolong?

Answer 1

Anda perlu menambah "jenis": "modul" dalam objek peringkat atas, bukan dalam objek "skrip".

Kandungan dalam objek "skrip" boleh diakses melalui npm run <x>来访问，其中<x> ialah kunci dalam objek "skrip".

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