오류: React 모듈 외부에서 import 문을 사용할 수 없습니다.

Question

저는 이제 막 React를 배우기 시작했습니다. https://react.dev/learn/add-react-to-an-existing-project에 있는 시작 가이드의 단계를 따랐지만 다음 오류가 계속 발생합니다. 모듈 외부에서 import 문을 사용할 수 없습니다.

내가 한 일은: 먼저 터미널에서 실행합니다. npm init -y npm install React React-dom

그런 다음 index.js 파일을 만들고 가이드에 제공된 코드를 복사했습니다. `'react-dom/client'에서 {createRoot} 가져오기;

// 기존 HTML 콘텐츠 지우기 document.body.innerHTML = '';

// React 구성요소 렌더링 const root = createRoot(document.getElementById('app')); root.render(

Hello, world

);`

하지만 효과가 없었어요.

인터넷의 거의 모든 솔루션에서는 package.json 파일에 "type": "module를 추가하라고 지시합니다. 추가했는데 오류가 지속됩니다.

다음과 같이 추가했습니다. { "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" }, "关键字": [] }

스크립트 태그 안에 "type": "module를 추가해도 작동하지 않습니다. 실제로 이것을 추가한 후 '<' 기호를 인식하지 못하는 것으로 표시되어 React가 완전히 충돌했습니다...

제가 시도하고 해본 것은 실제로 React를 다운로드하는 것이 아니라 CDN에 연결하고 babel을 사용하는 것이었습니다. 하지만 제가 수강하고 있는 무료 강좌에 따르면 CDN을 사용하는 것은 React를 사용하는 좋은 방법이 아닙니다.

완전히 길을 잃었어요. 누구든지 도와줄 수 있나요?

Answer 1

"scripts" 개체가 아닌 최상위 개체에 "type": "module"을 추가해야 합니다.

"스크립트" 개체의 콘텐츠는 "스크립트" 개체의 키인 npm run <x>来访问，其中<x>를 통해 액세스할 수 있습니다.

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