SyntaxError: Cannot use import statement outside a module with dynamic import of Nextjs

Question

我按照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 添加到 SunEditor 中时：

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

我遇到了这个错误：

SyntaxError: Cannot use import statement outside a module

我是不是遗漏了什么，我该如何解决？

Answer 1

出于同样的原因，您必须动态导入 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>
    );
};

SyntaxError: Cannot use import statement outside a module with dynamic import of Nextjs

SyntaxError: Cannot use import statement outside a module with dynamic import of Nextjs

reactjs

server-side-rendering

next.js

suneditor