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

Question

I followed the doc of SunEditor, it's like:

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;

It works well, but when I add setOptions into SunEditor:

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

I got this error:

SyntaxError: Cannot use import statement outside a module

Am I missing something, and how can I fix it?

Answer 1

For the same reason you have to dynamically import SunEditor, you also have to dynamically import buttonList.

One approach is to create a custom component where you add all the suneditor code.

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

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

export default CustomSunEditor;

Then, dynamically import that component with next/dynamic where needed.

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

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