fix: `ERR_REQUIRE_ESM` error when project type is set to `module`

[titouanmathis]

Description 📖

This pull request fix a bug where iles fails to build when the project has a package.json file with its type set to module. See the reproduction repository for an example.

Background 📜

This was happening because the files in the temporary directory are in CJS with the .js extension. When the root package.json type is set to module, files in CJS format should have a .cjs extension.

The Fix 🔨

I tried several fixes bundling iles to ESM with tsup but it is not as simple as changing the format in the tsup.config.ts file and iles should detect the type of project to work correctly.

The simplest fix is adding a package.json file in the temporary directory with the type set to commonjs.

Screenshots 📷

With "type": "module" in the root package.json file:

When adding a package.json file with "type": "commonjs" in the .iles-ssg-temp directory:

[nx-cloud[bot]]

Nx Cloud Report

CI is running for commit 427c7a39e1b63eef5cd1ea26e080142e80611919.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

---

Sent with 💌 from NxCloud.

[ElMassimo]

Hi Titouan, thanks for reporting, and for providing a fix 😃

Some packages in the Vite ecosystem do not work as expected in module projects, which is why I wouldn't recommend adding type: module yet.

The workaround looks good, I'll test it during the week and release a new version.

[ElMassimo]

The fix works nicely in the repos I tested. Thanks again!

Released in iles@0.7.21.

[titouanmathis]

Thanks for the quick merge!

Some packages in the Vite ecosystem do not work as expected in module projects, which is why I wouldn't recommend adding type: module yet.

Unfortunately, I had to add the "type": "module" to be able to use the remark-gfm package which is ESM only. Without it, I encountered the following error with the following configuration:

import { defineConfig } from 'iles';
import remarkGfm from 'remark-gfm';

export default defineConfig({
    markdown: {
    remarkPlugins: [remarkGfm],
  },
});

Vite sets an isESM flag (src) which seems to fix this error when setting the type to module.

I updated my demo repository with the remark-gfm package if you want to check it out.

[ElMassimo]

Because that is so common in packages for the Remark and Rehype ecosystem, I added support for internal ESM imports if you pass a string with the package name:

import { defineConfig } from 'iles'

export default defineConfig({
  markdown: {
    remarkPlugins: [
      'remark-gfm',
    ],
  },
})

[titouanmathis]

I missed this part of the documentation, thanks for the precision!