SyntaxError：无法在动态导入 Nextjs 的模块外部使用 import 语句

我遵循了SunEditor的文档，它是这样的：

import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File

const SunEditor = dynamic(() => import("suneditor-react"), {
  ssr: false,
});

const MyComponent = props => {
  return (
    <div>
      <p> My Other Contents </p>
      <SunEditor />
    </div>
  );
};
export default MyComponent;

它工作得很好，但是当我添加setOptions into SunEditor:

import { buttonList } from "suneditor-react";
...
 <SunEditor
   setOptions={{buttonList:buttonList.complex}}
/>

我收到这个错误：

SyntaxError: Cannot use import statement outside a module

我是否遗漏了什么？我该如何修复它？

出于同样的原因，您必须动态导入SunEditor，你还必须动态导入buttonList.

一种方法是创建一个自定义组件，在其中添加所有 suneditor 代码。

import React from 'react';
import SunEditor, { buttonList } from 'suneditor-react';

const CustomSunEditor = () => {
    return <SunEditor setOptions={{ buttonList: buttonList.complex }} />;
};

export default CustomSunEditor;

然后，动态导入该组件next/dynamic在需要的地方。

const CustomSunEditor = dynamic(() => import('../components/CustomSunEditor'), {
    ssr: false,
});

const MyComponent = props => {
    return (
        <div>
            <p> My Other Contents </p>
            <CustomSunEditor />
        </div>
    );
};