مشكلة Cannot use import statement outside a module في suneditor مع next.js

المشكلة إن suneditor-react يحتوي على بعض المشاكل عند العمل مع next js 

ولكن يمكن حل مشكلتك عن طريق عمل إستدعاءimport لملف الجافاسكريبتjavascript المسؤل عن الbuttonList يدوياً , فبدلاً من كتابة

import {buttonList} from "suneditor-react"

يمكنك تحويلها إلى الشكل التالي 

import { basic, formatting, complex } from "suneditor-react/dist/misc/buttonList";

وتستطيع تضمين الأزرار في الsuneditor عن طريق الشفرة البرمجية التالية

<SunEditor
        setOptions={{
          buttonList:
            basic.concat(formatting).concat(complex)

        }} />

حيانا يمكن حل المشكلة Cannot use import statement outside a module عن طريق إضافة الخاصية type: module في ملف package.json

// package.json
{
  "type": "module"
}

هذا يجبر تحميل الملفات بشكل وحدات.

ومن توثيق المكتبة يمكن استخدام الشكل التالي لتحقيق التضمين:

• نمط التضمين dynamic import syntax

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;

التوثيق: github/suneditor-react