未捕获的语法错误：无法在 React 模块外使用导入语句

Question

作为学习 React 的一部分，我尝试运行以下代码。

HTML

<html>
    <head>
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <div id="root">
        </div>
    <script src="index.js"></script>
    </body>
</html>

Javascript

import React from "react"
import ReactDOM from "react-dom"

const navbar= (
    <nav>
        <h1>Alchamentry</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(navbar)

package.json

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

现在，当我打开浏览器时，出现以下错误：

index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

并且浏览器上没有显示任何内容。 如何解决这个问题？ 我试图将module添加到脚本标签，但它给出了另一个错误

<script src="index.js" type="module"></script>

index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

Answer 1

这是创建反应组件的方法。 注意：React 组件的名称必须大写。

 const Navbar = () => { return ( <nav> <h1>Hello, i am NavBar. Nice to meet you. And here are my links</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Profile</a></li> </ul> </nav> ) } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Navbar/>);

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

您需要像 Webpack 和 Babel 这样的工具来将 jsx 捆绑和转换为有效的 JavaScript 代码。 如果您尝试使用像 CRA 这样的包创建一个项目，那么这些工具是开箱即用的。

此 jsx 无效 JavaScript 并且浏览器的 JavaScript 引擎无法理解。

    const navbar= (
    <nav>
        <h1>Alchamentry</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

但如果你仍然想自己完成所有配置，你可以查看这篇文章：

点击

未捕获的语法错误：无法在 React 模块外使用导入语句

问题描述

HTML

Javascript

package.json

2 个解决方案

解决方案1
1 2022-12-08 07:30:15

解决方案2
1 2022-12-08 07:33:33

未捕获的语法错误：无法在 React 模块外使用导入语句

问题描述

HTML

Javascript

package.json

2 个解决方案

解决方案1 1 2022-12-08 07:30:15

解决方案2 1 2022-12-08 07:33:33

解决方案1
1 2022-12-08 07:30:15

解决方案2
1 2022-12-08 07:33:33