mjml - require is not defined in ES module scope, you can use import instead

[dcheglakov]

Describe the bug

When trying to import mjml in node enviroment in production I get a 500 error and with this error require is not defined in ES module scope, you can use import instead

I've checked mjml on publint no errors, all good.

Reproduction

A reproduction of the issue can be found at https://github.com/dcheglakov/sveltekit-mjml-import

To reproduce:

1. Clone the repo
2. pnpm i or npm i
3. pnpm dev - everything is fine
4. pnpm build then pnpm preview - everything is fine
5. HOST=127.0.0.1 PORT=4000 node build - 500 error, check logs for more info

Logs

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/dcheglakov/mjml-import/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:149351:7
    at requireNode (file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:149458:3)
    at requireHtmlminifier (file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:149473:17)
    at file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:157908:23
    at requireLib$r (file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:158308:3)
    at file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:164583:43
    at requireLib (file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:164594:3)
    at file:///Users/dcheglakov/mjml-import/build/server/chunks/2-47b89ce5.js:164598:18
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 57.39 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Safari: 16.3
  npmPackages:
    @sveltejs/adapter-node: ^1.2.3 => 1.2.3 
    @sveltejs/kit: ^1.5.0 => 1.14.0 
    mjml: ^4.13.0 => 4.13.0 
    svelte: ^3.54.0 => 3.57.0 
    vite: ^4.2.0 => 4.2.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[dcheglakov]

Fixed. The problem is that mjml was added as a dev dependency, moved to dependencies and everything worked. Apologies.

[fjenett]

Hi, i had the same thing happening to me for puppeteer. So, for reference and hoping some search engine picks this up:

I was:

• using @sveltejs/adapter-node
• seeing error ReferenceError: require is not defined in ES module scope, you can use import instead
• also seeing this build error The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

Check that you have not accidentally added a dependency as devDependency in package.json.

[sawinjer]

Hello everyone!
I've spent 1.5days to workaround in the context of the directus extensions build system
I got the same error, and after investigation found that the source of the error was html-minifier package. I've tried all options (mjml-browser, mrml (wasm bindings)).
And on this issue I found this magic lines

	"overrides": {
		"html-minifier": "npm:[email protected]"
	}

I've added it to the package JSON and everything worked!!!