Javascript 如何使用JSX导入模块？

我是新来的。我已使用此网站上的信息将其添加到项目中：

那么

每当我尝试添加模块时，它都会给我：

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

以下是我导入的方式：

import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup" 

（我在react js文件的顶部以及在componentDidMount（）方法中调用的单独脚本文件中尝试了这一点，通过：

 const script = document.createElement("script");

script.src = "my_script.js";
script.async = true;

document.body.appendChild(script);

---

谢谢。

使用导出类Arrow…您必须使用导入{Arrow}…而对于export default类Arrow…您必须使用import Arrow…在前一种情况下，一个文件中可能有多个export…语句，因此您的import语句必须能够通过将潜在的变量列表放在大括号中来处理多个变量的导入。对于export default…只能有一个从该文件导出，因此import语句可以自信地断言它正在导入单个变量，即import myVariabl

您提到的步骤是用于jsx设置的。您能粘贴完整的错误消息吗？ 您是否已在现有项目中安装React

---

您可能必须安装React才能使其正常工作。

导入React from'React'语句在哪里，该js文件如何连接到您的html？如果要从html中的

标记链接包含此代码的文件，则需要为该脚本标记指定一个

type=“module”

属性。

请注意，在您链接的页面中，没有对

导入

s或

导出

s的引用。
该页面还说明：

提示
我们在这里使用npm只是为了安装JSX预处理器

---

这意味着它只会将JSX表达式处理为

React.createElement

函数调用。如果您想使用模块，您需要通过更改

的
类型来使用本机模块。我稍微更改了这个问题，因为我不想让人们认为这是特定导入的问题，而不仅仅是imp我尝试将导入放在包含react组件的js文件的顶部，然后尝试将脚本文件追加到componentDidMount（）中方法，但两者都不起作用。我是否在错误的位置导入？我非常困惑，为什么您要用
createElement
定义脚本标记，而不是将其写入html标头。即使如此，您仍然没有设置
script.type=“module”
。这段代码在哪里运行？在其他一些链接到实际HTML的js文件中？我们需要澄清，以了解您的项目是如何设置的。天哪，我是个白痴，这困扰了我好几个小时，我不知道答案这么简单。将导入放入脚本中，添加script.type=“module”，并将脚本添加到html文件的头中，效果非常好，干杯！
import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup" 

 const script = document.createElement("script");

script.src = "my_script.js";
script.async = true;

document.body.appendChild(script);

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