JiHong88 / suneditor

Pure javascript based WYSIWYG html editor, with no dependencies.
http://suneditor.com
MIT License
1.74k stars 309 forks source link

add mjs file or use type: module #1419

Open ABorovenskyi opened 3 months ago

ABorovenskyi commented 3 months ago

Is your feature request related to a problem? Please describe. I'm using the editor in vi react app and it works great. The editor is integrated using https://github.com/mkhstar/suneditor-react. The only issue I have is in test environment. All test fail for the component that renders the editor.

Describe the solution you'd like vi suggests a solution Module /Users/user/app/node_modules/.pnpm/suneditor@2.46.3/node_modules/suneditor/src/plugins/index.js:4 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "suneditor" asking them to ship the file in .mjs extension or add "type": "module" in their package.json

Describe alternatives you've considered Vi also suggests a temporary solution

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "suneditor"
        ]
      }
    }
  }
}

Unfortunately it does not help

Another alternative is to mock the editor in tests and it works. here is the example

vi.mock('suneditor-react', () => ({
  default: ({ onChange, setContents }) => {
    if (typeof setContents !== 'string') {
      return null;
    }
    return <textarea className="sun-editor" onChange={(e) => onChange(e.target.value)} value={setContents}/>;
  }
}));

Additional context I run tests on the local machine and on Github actions using jsdom as an environment.

here is the error trace if it is helpful

Cannot use import statement outside a module
/Users/user/app/node_modules/.pnpm/suneditor@2.46.3/node_modules/suneditor/src/plugins/index.js:4
import blockquote from './command/blockquote';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Object..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Function._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/Users/user/app/node_modules/.pnpm/suneditor-react@3.6.1_react-dom@18.2.0_react@18.2.0_suneditor@2.46.3/node_modules/suneditor-react/dist/components/SunEditor.js:41:33)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)

I'd really appreciate your help with this. Thank you and have a great day!