语法错误：无法在模块外部使用 import 语句 React JS Antd

Question

为了优化捆绑包大小，我不是从 lib 文件夹获取组件，而是从 es 文件夹导入它。

示例：

import Modal from 'antd/es/modal';

所以在编写测试用例时，它给了我以下错误

语法错误：无法在模块外部使用 import 语句

我已经解决了可能重复的相关问题，但无法用我当前的实现来解决它，因为它不属于 全局范围。

所以我的问题是，有什么办法可以实现这个

我也尝试参考以下链接，但没有帮助，

https://github.com/reactstrap/reactstrap/blob/master/package.json#L21 https://medium.com/@fredriccliver/syntaxerror-cannot-use-import-statement-outside-a-module-69182014b8c6

Answer 1

改变

import frFR from 'antd/es/locale/fr_FR';

到

import frFR from 'antd/lib/locale/fr_FR';

解决这个问题。

Answer 2

我在页脚组件中遇到了同样的问题。

我动态添加了页脚组件，这就是我解决此错误的方法：

import dynamic from "next/dynamic";

const Footer = dynamic(
  async () => await import("../../components/footer/footer"),
  {
    ssr: false,
  }
);

export default function Main() {
  return (
    <>
      <Footer />
    </>
  );
}