Error [ERR_REQUIRE_ESM]: require() of ES Module... in version 1.9.0

[ebuster]

Hi, I am used v-code-diff 1.8.0 in Quasar 2 project (Vue3) with Vite, and everything was fine (not even looking at the fact that I was using it incorrectly - just importing the codeDiff into my component, without registering it in the app via the app.use()), but after updating just only to version 1.9.0, app crashing on the start on every single CodeDiff import with the following message:

Error [ERR_REQUIRE_ESM]: require() of ES Module ./project/dist/ssr/node_modules/v-code-diff/dist/index.cjs.js from ./project/dist/ssr/server/server-entry.js not supported.
index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename index.cjs.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in ./project/dist/ssr/node_modules/v-code-diff/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

I created two dest folders diff (last broken and previous working), to see actual difference and was surprised that type="module" was not present before 1.9.0. So now it clear why it not work anymore for me (not only I guess). Solution IMHO is to follow the conventions https://vitejs.dev/guide/build.html#library-mode and rename "require": js file into cjs as described above in first place.

[Shimada666]

Thank you for your issue. I will try to fix the issue within the next couple of days. In the meantime, you can use version 1.8.0. I'll notify you once it's fixed.

[Shimada666]

Could you please provide me with a minimal reproduction that triggers this error? I'm not sure how to test if it is working. Thanks.

[ebuster]

I don't know how to make a minimal example, but here is what I get broken after last update:

TL;DR You need Vite project with SSR, and ship will happen not when you just build it, but when you run it.

1. Install Quasar with Quasar CLI with Vite: https://quasar.dev/start/quasar-cli#installation-project-scaffolding

2. Import Diff module into some component and render it with some props. Before you do this, you may need to register it globally using boot files: https://quasar.dev/quasar-cli-vite/boot-files#anatomy-of-a-boot-file This approach is similar to others Vue-frameworks, I guess you know. Otherwise you can just import Diff locally (as I did before).

3. Build & Run quasar build -m ssr cd dist/ssr node index.js

Then it should throw error in place where is module imported (boot file, or other).

[Shimada666]

I don't know how to make a minimal example, but here is what I get broken after last update:

TL;DR You need Vite project with SSR, and ship will happen not when you just build it, but when you run it.

1. Install Quasar with Quasar CLI with Vite: https://quasar.dev/start/quasar-cli#installation-project-scaffolding
2. Import Diff module into some component and render it with some props. Before you do this, you may need to register it globally using boot files: https://quasar.dev/quasar-cli-vite/boot-files#anatomy-of-a-boot-file This approach is similar to others Vue-frameworks, I guess you know. Otherwise you can just import Diff locally (as I did before).
3. Build & Run quasar build -m ssr cd dist/ssr node index.js

Then it should throw error in place where is module imported (boot file, or other).

Thank you for the information. I will find some time to test it.