outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
https://www.getoutline.com
BSD 3-Clause "New" or "Revised" License
2.87k stars 588 forks source link

[ERR_REQUIRE_ESM]: Must use import to load ES Module: #554

Closed HT-Moh closed 2 years ago

HT-Moh commented 2 years ago

Hi I am having the following error while trying to build the docker file yarn run build

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/node_modules/gemoji/index.js
require() of ES modules is not supported.
require() of /app/node_modules/gemoji/index.js from /app/node_modules/rich-markdown-editor/dist/components/EmojiMenu.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /app/node_modules/gemoji/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/app/node_modules/rich-markdown-editor/dist/components/EmojiMenu.js:7:18)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
  type: 'NodeError',
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
HT-Moh commented 2 years ago

I update the package from image

then I got new error :

> Build error occurred
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/app/node_modules/lodash/memoize' imported from /app/node_modules/rich-markdown-editor/dist/index.js
Did you mean to import lodash/memoize.js?
    at finalizeResolution (internal/modules/esm/resolve.js:285:11)
    at moduleResolve (internal/modules/esm/resolve.js:708:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:73:40)
    at link (internal/modules/esm/module_job.js:72:36) {
  type: 'NodeError',
  code: 'ERR_MODULE_NOT_FOUND'
}
error Command failed with exit code 1.
HT-Moh commented 2 years ago

First I would like to say the issue has nothing to do with docker, as this reproducible locally yarn build version rich-markdown-editor": "^11.17.9" has the following error:

_modules/gemoji/index.js from /media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/rich-markdown-editor/dist/components/EmojiMenu.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/gemoji/package.json.

    at new NodeError (node:internal/errors:370:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:13)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/rich-markdown-editor/dist/components/EmojiMenu.js:7:18)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32) {
  type: 'Error',
  code: 'ERR_REQUIRE_ESM'
}

Version "rich-markdown-editor": "^11.18.1-1"

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/rich-markdown-editor/dist/index.js
require() of ES modules is not supported.
require() of /media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/rich-markdown-editor/dist/index.js from /media/cc/Pytech/crypto-catalyst-website/NextJS/.next/server/pages/admin/[blogId].js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /media/cc/Pytech/crypto-catalyst-website/NextJS/node_modules/rich-markdown-editor/package.json.
HT-Moh commented 2 years ago

Workaround Fixed :

yarn remove rich-markdown-editor
yarn add rich-markdown-editor@11.17.4-0
tommoor commented 2 years ago

Fixed in 11.18.1