エラー: React モジュールの外では import ステートメントを使用できません

Question

React の学習を始めたばかりです。 https://react.dev/learn/add-react-to-an-existing-project のスタート ガイドの手順に従いましたが、次のエラーが発生し続けます: モジュールの外部ではインポート ステートメントを使用できません。

私がやったことは次のとおりです。 まずターミナルで実行します。 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 を追加するように指示されています。 追加しましたが、エラーが残ります。

これが私がそれを追加した方法です: { "名前": "プロジェクト", "devDependency": { "vite": "最新" }, "スクリプト": { "タイプ": "モジュール", "開始": "vite", "dev" : "vite", "build": "vite ビルド"、"preview": "vite プレビュー" }、"type": "モジュール"、"説明": "クイック スタート:"、"バージョン": "1.0.0 " , "main": "index.js", "author": "", "license": "ISC", "dependency": { "react": "^18.2.0", "react-dom": " ^ 18.2.0" }, "キーワード": [] }

script タグ内に "type": "module を追加しても機能しません。 sscccc 実際、これを追加した後、記号 '<' を認識できないことが示されたため、React は完全にクラッシュしました...

私が試してうまくいったのは、実際に React をダウンロードするのではなく、CDN にプラグインして babel を使用することです。しかし、私が受講している無料コースによると、CDN の使用は React の使用方法としては良くありません。

完全に迷ってしまいました。誰か助けてくれませんか？

Answer 1

「scripts」オブジェクトではなく、最上位オブジェクトに「type」:「module」を追加する必要があります。

「scripts」オブジェクトのコンテンツには、npm run <x> によってアクセスできます。<x> は、「scripts」オブジェクトのキーです。

{ "名前": "プロジェクト", "タイプ": "モジュール", "devDependency": { "vite": "最新" }, "スクリプト": { "開始": "vite", "dev": "vite"、"build": "vite ビルド"、"preview": "vite プレビュー" }、"type": "モジュール"、"説明": "クイック スタート:"、"バージョン": " 1.0.0"、"メイン": "index.js"、"作成者": ""、"ライセンス": "ISC"、"依存関係": { "反応": "^18.2.0"、"反応-dom ": "^18.2.0" }, "キーワード": [] }