[英]SyntaxError: Cannot use import statement outside a module with dynamic import of Nextjs
I followed the doc of SunEditor, it's like:我遵循了 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;
It works well, but when I add setOptions
into SunEditor
:它运行良好,但是当我将
setOptions
添加到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?我是否遗漏了什么,我该如何解决?
For the same reason you have to dynamically import SunEditor
, you also have to dynamically import buttonList
.出于同样的原因,您必须动态导入
SunEditor
,您还必须动态导入buttonList
。
One approach is to create a custom component where you add all the suneditor code.一种方法是创建一个自定义组件,您可以在其中添加所有 suneditor 代码。
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.然后,在需要时使用
next/dynamic
动态导入该组件。
const CustomSunEditor = dynamic(() => import('../components/CustomSunEditor'), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<CustomSunEditor />
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.