Error: [SUNEDITOR.core.callPlugin.fail] The called plugin does not exist or is in an invalid format. (pluginName:"table")

Describe the bug When i clicked table button on toolbar i got this error: Error: [SUNEDITOR.core.callPlugin.fail] The called plugin does not exist or is in an invalid format. (pluginName:“table”)

To Reproduce Steps to reproduce the behavior:

1. Load editor
2. Click on Table button
3. See error

My codes Show a view to set numbers of column and rows

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Firefox: 99.0b8
• “suneditor”: “^2.42.0”,
• “suneditor-react”: “^3.4.0”,
• “next”: “10.2.0”,

Additional context

import React from 'react';
import dynamic from 'next/dynamic';

const plugins = dynamic(() => import('suneditor/src/plugins'), {
  ssr: false,
});
const SunEditor = dynamic(() => import('suneditor-react'), {
  ssr: false,
});

export const options = {
  plugins: [plugins],
  height: 300,
  buttonList: [
    // Default
    ['undo', 'redo'],
    ['font', 'fontSize', 'formatBlock'],
    ['paragraphStyle', 'blockquote'],
    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
    ['fontColor', 'hiliteColor', 'textStyle'],
    ['removeFormat'],
    ['outdent', 'indent'],
    ['align', 'horizontalRule', 'list', 'lineHeight'],
    ['table', 'link', 'image', 'video', 'audio'],
    ['imageGallery'],
    ['fullScreen', 'showBlocks', 'codeView'],
    ['preview', 'print'],
    ['template'],
  ],
};

const RichTextEditor = function () {
  return (
    <SunEditor setOptions={options} setAllPlugins={false} />
  );
};
export default RichTextEditor;

[nguyenduythuc]

I used dynamic import inside useEffect and it worked

import React, { useEffect } from 'react';
import dynamic from 'next/dynamic';
import { toolbar } from './Config';

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

const RichTextEditor = function () {
  const [options, setOptions] = React.useState(null);
  useEffect(() => {
    import('suneditor/src/plugins').then((plugins) => setOptions(() => ({ ...toolbar, plugins })));
  }, []);
  return (
      <SunEditor setOptions={options} setAllPlugins={false} />
  );
};
export default RichTextEditor;

Thank @JiHong88 for your support 😃

[nguyenduythuc]

Thank for the answer. I think i found out what’s happening. When my application is loaded i clicked table icon and error fired like above. Then i

1. Change const options = dynamic(() => import('suneditor/src/plugins'), { ssr: false, }); to const options = require('suneditor/src/plugins')
2. Then i saved changes
3. The application’s hot reloaded
4. I clicked table button again and it worked I think plugins doesn’t load correctly when using dynamic import. If i use const options = require('suneditor/src/plugins') for the first time the application loading, i’ll get error like below

Hoping it can make you understand what’s happening