esm compatiblity issue on react-email with strip-ansi

[pepsiamir]

Describe the Bug

`
const stripAnsi = require('strip-ansi');
^

Error [ERR_REQUIRE_ESM]: require() of ES Module D:\reps\react-email-starter\node_modules\strip-ansi\index.js from D:\reps\react-email-starter\node_modules\ora\index.js not supported.
Instead change the require of D:\reps\react-email-starter\node_modules\strip-ansi\index.js in D:\reps\react-email-starter\node_modules\ora\index.js to a dynamic import() which is available in all CommonJS modules.
at Object. (D:\reps\react-email-starter\node_modules\ora\index.js:7:19)
at Object. (D:\reps\react-email-starter\node_modules\react-email\dist\source\utils\generate-email-preview.js:10:31)
at Object. (D:\reps\react-email-starter\node_modules\react-email\dist\source\utils\index.js:20:14)
at Object. (D:\reps\react-email-starter\node_modules\react-email\dist\source\commands\dev.js:7:17)
at Object. (D:\reps\react-email-starter\node_modules\react-email\dist\source\index.js:8:15) {
code: 'ERR_REQUIRE_ESM'
}
`

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/resendlabs/react-email

To Reproduce

{ "name": "emails", "version": "0.0.18", "scripts": { "dev": "email dev", "export": "email export" }, "dependencies": { "@react-email/components": "0.0.6", "react-email": "1.9.3" } }

Expected Behavior

The development server doesn't start

What's your node version? (if relevant)

18.17.1

[e-willits]

can confirm this happened in my project as well, cannot run tests to complete github action

[atadeuccislideworks]

First time running email dev the server started fine, on the second try I also got this error.

Deleting node_modules and reinstalling didn't fix it.

Using version 1.10.0

EDIT: Manage to get it working using npm instead of yarn, not sure why

[gabrielmfern]

@atadeuccislideworks That's interesting, could you give a reproduction so I can test it and maybe find out what's wrong in your situation? This shouldn't be happening and I'll work on a fix for it

[atadeuccislideworks]

@atadeuccislideworks That's interesting, could you give a reproduction so I can test it and maybe find out what's wrong in your situation? This shouldn't be happening and I'll work on a fix for it

I'll try to reproduce

[atadeuccislideworks]

@gabrielmfern yeah, unfortunately I wasn't able to reproduce consistently the issue, managed once in a new folder, then couldn't make it happen again and I tried a bunch, it's one of those weird ones. One issue that always happened was #977. Thanks anyway ✌

[tominek]

I have the same issue, first time after install it works and on second run it stops working. Tried both node versions 18 and 20 - without difference.

EDIT: I am using Yarn as default package manager. I tried installing using NPM and then running via Yarn and now it seems to work.

[in19farkt]

I also get this error when creating the project from template.

Steps to reproduce:

1. environment:
   • node: v18.19.0
   • npm: 9.9.2
   • yarn: 1.22.17
2. run npx create-email@0.0.20
3. run cd ./react-email-starter
4. run yarn
5. run yarn dev and wait for the dev server to start
6. press Ctrl + C
7. run yarn dev or yarn export
8. look at the error in the terminal 🤔

Steps to resolve issue:

1. open terminal in react-email-starter folder
2. remove all previously installed dependencies using rm -rf ./node_modules ./.react-email ./yarn.lock
3. go to package.json and remove the workspaces configuration

   {
     "name": "emails",
     "version": "0.0.18",
     "private": true,
   - "workspaces": [
   -   ".react-email"
   - ],
     "scripts": {
       "dev": "email dev",
       "export": "email export"
     },
     "dependencies": {
       "@react-email/components": "0.0.12",
       "react-email": "1.10.0"
     }
   }

4. run yarn
5. edit yarn.lock

   - "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   + "string-width-cjs@npm:string-width@^4.2.0":
   +   name string-width-cjs
   +   version "4.2.3"
   +   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   +   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   +   dependencies:
   +     emoji-regex "^8.0.0"
   +     is-fullwidth-code-point "^3.0.0"
   +     strip-ansi "^6.0.1"
   +
   + string-width@^4.1.0:
       version "4.2.3"
       resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
       integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
       dependencies:
         emoji-regex "^8.0.0"
         is-fullwidth-code-point "^3.0.0"
         strip-ansi "^6.0.1"

   - "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   + "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   +   name strip-ansi-cjs
   +   version "6.0.1"
   +   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   +   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   +   dependencies:
   +     ansi-regex "^5.0.1"
   +
   + strip-ansi@^6.0.0, strip-ansi@^6.0.1:
       version "6.0.1"
       resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
       integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
       dependencies:
         ansi-regex "^5.0.1"

6. run yarn
7. run yarn dev and wait for the dev server to start
8. press Ctrl + C
9. run yarn dev or yarn export
10. enjoy 😉

[jinsley8]

See comment regarding a bug with yarn: #1130 (comment)

[gabrielmfern]

Closing this as it is an issue with yarn, eslint/eslint#17215 (reply in thread).