What happened?
When I have added @tiptap/extension-code-block-lowlight
extension to my project it produces the following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: .../node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of .../node_modules/lowlight/lib/common.js from ..../dist/ssr/server/server-entry.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 common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/lowlight/package.json.
I'm currently using TipTap in a Quasar project using Vite.js.
I have the following package.json
:
"dependencies": {
...
"@quasar/extras": "1.15.8",
"@tiptap/extension-bullet-list": "^2.0.0-beta.209",
"@tiptap/extension-code-block-lowlight": "^2.0.0-beta.209",
"@tiptap/extension-heading": "^2.0.0-beta.209",
"@tiptap/extension-link": "^2.0.0-beta.209",
"@tiptap/extension-list-item": "^2.0.0-beta.209",
"@tiptap/starter-kit": "2.0.0-beta.204",
"@tiptap/vue-3": "2.0.0-beta.204",
"lowlight": "^2.8.0",
"prosemirror-commands": "^1.3.1",
"prosemirror-dropcursor": "1.5.0",
"prosemirror-gapcursor": "^1.3.1",
"prosemirror-history": "^1.3.0",
"prosemirror-keymap": "^1.2.0",
"prosemirror-model": "^1.18.1",
"prosemirror-schema-list": "^1.2.2",
"prosemirror-state": "^1.4.1",
"prosemirror-transform": "^1.7.0",
"prosemirror-view": "^1.28.2",
"quasar": "^2.8.0",
"vue": "^3.0.0",
},
"devDependencies": {
"@quasar/app-vite": "^1.1.3",
"typescript": "^4.5.4"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
The issue happens when I try to run the files after being bundled.
Whenever I run node dist/ssr/index.js
it gives me the error written above.
More specifically I run the following script to build my APP and then run E2E tests: ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js
What did you expect to happen?
The project to run without any problem with node ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js
Reproduction URL
https://github.com/CharlieBrownCharacter/quasar-error-vite-ssr
How to reproduce?
- Clone the repository
- Run
quasar build --mode ssr --port 3000
to build the project (this one works just fine)
- Run
node dist/ssr/index.js
You will see the error
Flavour
Vite Plugin (@quasar/vite-plugin)
Areas
Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), SSR Mode
Platforms/Browsers
Chrome
Quasar info output
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: .../node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of .../node_modules/lowlight/lib/common.js from ..../dist/ssr/server/server-entry.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 common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/lowlight/package.json.
Relevant log output
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js from /home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.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 common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/whatever/devotto/devotto.com/node_modules/lowlight/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Module.<anonymous> (/home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.js:1:1349)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32) {
code: 'ERR_REQUIRE_ESM'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:test:webserver: `ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start:test:webserver script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/whatever/.npm/_logs/2022-12-21T12_59_23_713Z-debug.log
Error: server closed unexpectedly
at ChildProcess.onClose (/home/whatever/devotto/devotto.com/node_modules/start-server-and-test/src/index.js:75:14)
at ChildProcess.emit (events.js:400:28)
at maybeClose (internal/child_process.js:1058:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Additional context
I'm guessing that I need to transpile the file lowlight.js
into ESM. My experience in this area is very limited and the resources online didn't help me much (at least to understand exactly what is going on).
I tried extending viteConf
in quasar.config.js
:
module.exports = function() {
return {
build: {
extendViteConf (viteConf, { isClient, isServer }) {
if (isServer) {
viteConf.optimizeDeps = viteConf.optimizeDeps || {};
viteConf.optimizeDeps.include = ['./node_modules/highlight.js'];
viteConf.build.commonjsOptions = viteConf.build.commonjsOptions || {};
viteConf.build.commonjsOptions.include = [/highlight.js/, /node_modules/];
// viteConf.optimizeDeps.entries = [
// 'node_modules/@tiptap/extension-code-block-lowlight/dist/tiptap-extension-code-block-lowlight.cjs',
// 'node_modules/highlight.js'
// ];
}
},
}
}
}
But no luck as well. I get the same error.
kind/bug 🐞 mode/ssr Qv2 🔝 flavour/vite-plugin bug/1-hard-to-reproduce bug/1-repro-available area/cli