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

dcheglakov commented 1 year ago

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:

Clone the repo
pnpm i or npm i
pnpm dev - everything is fine
pnpm build then pnpm preview - everything is fine
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 commented 1 year ago

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

fjenett commented 1 year ago

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 commented 2 weeks ago

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:html-minifier-terser@7.1.0"
    }

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

sveltejs / kit