ERR_REQUIRE_ESM const wrap = require("wrap-ansi");

[alexblack]

Issue summary

Often (but not always) when I run yarn dev to start the project I get this error below. This happens to my colleague too on a different computer, on a different project, both are new projects from the shopify remix template.

My colleague reports that if he switches from yarn to npm then the problem goes away. If I rm -rf node_modules and yarn.lock, then run yarn again it usually goes away.

➜  shopify-reports git:(main) yarn dev
yarn run v1.22.19
$ prisma generate && prisma migrate deploy
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma

✔ Generated Prisma Client (4.16.2 | library) to ./node_modules/@prisma/client in 46ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient()

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"

1 migration found in prisma/migrations

No pending migrations to apply.
$ shopify app dev
/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4
const wrap = require("wrap-ansi");
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/alex/dev/micro/shopify-reports/node_modules/wrap-ansi/index.js from /Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js not supported.
Instead change the require of index.js in /Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4:14)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/handle.js:7:24)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/index.js:4:16)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/cli-ux/index.js:4:16)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/command.js:7:18)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/index.js:5:19) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.18.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[djordje-st]

I get a similar issue using Node 20.10.0.

$ shopify app dev
/home/evonux/code/upsell/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4
const wrap = require("wrap-ansi");
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/evonux/code/upsell/node_modules/wrap-ansi/index.js from /home/evonux/code/upsell/node_modules/@oclif/core/lib/errors/errors/pretty-print.js not supported.
Instead change the require of index.js in /home/evonux/code/upsell/node_modules/@oclif/core/lib/errors/errors/pretty-print.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/evonux/code/upsell/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4:14) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.10.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[natalieoldroyd]

I can replicate this error if I choose to use the -W flag at this prompt at this step in Build a Discounts Experience tutorial . Using Node 18.17.0 and yarn

const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/string-width/index.js from /Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/wrap-ansi/index.js not supported.
Instead change the require of /Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/string-width/index.js in /Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/wrap-ansi/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/wrap-ansi/index.js:2:21)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4:14)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/errors/handle.js:7:24)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/errors/index.js:4:16)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/cli-ux/index.js:4:16)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/command.js:7:18)
    at Object.<anonymous> (/Users/natalieoldroyd/Dev/yarn-test-bub/node_modules/@oclif/core/lib/index.js:5:19) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.17.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[fermisea]

I have the same issue: yarn add any-package -W and yarn run dev is enough to trigger it. Removing yarn.lock and node_modules fixes but it's quite annoying

[matteodepalo]

Hi, this seems to be an error coming from @oclif which is part of the CLI. I'll transfer the issue there.

[matteodepalo]

@Shopify/cli-foundations

[hoangdanh1998]

Please, Anyone can help

[lizzr-ecb]

Getting the same error when spinning up an app with yarn create @shopify/app

[isaacroldan]

Hi everyone, this is an existing issue with yarn + workspaces. See it here: https://github.com/yarnpkg/yarn/issues/8068 The workarounds are:

• Remove yarn.lock and node_modules everytime it happens (it will happen after adding a new dependency)
• Add the nohoist config to your package json for the packages that fail (see instructions here)
• Don't use yarn

[alexblack]

Hi @isaacroldan thx is there any option to not use yarn workspaces? I'm not too familiar with them or their purpose, but it doesn't sound like something necessary here in all cases...?

[isaacroldan]

I'm afraid they are necessary, each extension you add behaves like a different package with its own dependencies.

The best solution is to update your package.json so that the workspaces config looks like this:

"workspaces": {
  "packages": ["extensions/*"],
  "nohoist": ["**/wrap-ansi", "**/string-width"]
},

After that:

1. remove yarn.lock and node_modules again
2. Run yarn install
3. It should now work forever

[alexblack]

Are you saying that extensions are required? I thought our app didn't need one, so I removed the extensions folder and attempted to remove use of workspaces, but that didn't seem to fix this issue for me.

[isaacroldan]

No, extensions are not required, but workspaces are if you want to work with extensions. That's why we add them by default. It's ok to remove the extensions folder if you don't use them.

This issue was originally discovered using workspaces, but I think it also happens with normal packages where its sub-dependencies have conflicting versions. In our case we use oclif and ink (both are core dependencies), and both depend on different incompatible versions of wrap-ansi and string-width. Yarn should be able to handle that but... it isn't.

I think my solution from the previous comment is the easiest one, you are basically telling yarn to isolate every wrap-ansi dependency so that there are no conflicts.

[alexblack]

Ok gotcha, that lines up with what I'm seeing: that workspaces are not required (unless you're using extensions) but that the issue persists when not using workspaces.

I'm not sure how to apply your fix given I've removed workspaces from my package.json but I'll take a look.

On Fri, Jan 5 2024 at 8:36 AM, Isaac Roldán @.***> wrote:

No, extensions are not required, but workspaces are if you want to work with extensions. That's why we add them by default. It's ok to remove the extensions folder if you don't use them.

This issue was originally discovered using workspaces, but I think it also happens with normal packages where its sub-dependencies have conflicting versions. In our case we use oclif and ink (both are core dependencies), and both depend on different incompatible versions of wrap-ansi and string-width. Yarn should be able to handle that but... it isn't.

I think my solution from the previous comment is the easiest one, you are basically telling yarn to isolate every wrap-ansi dependency so that there are no conflicts.

— Reply to this email directly, view it on GitHub https://github.com/Shopify/cli/issues/3190#issuecomment-1878953106, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABELQT622XU5PAA7XCMLPDYNATZZAVCNFSM6AAAAABAREKYV6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZYHE2TGMJQGY . You are receiving this because you authored the thread.Message ID: @.***>

[isaacroldan]

Just add this to your package.json and should be good:

"workspaces": {
  "packages": ["extensions/*"],
  "nohoist": ["**/wrap-ansi", "**/string-width"]
},

(and remember to remove yarn.lock and node_modules and do a clean install after)

[alexblack]

Hi @isaacroldan thanks, hmm I wasn't sure I can/should add the packages line since I don't have any extensions (eg I've removed the folder extensions).

1. I added the workspaces section like you suggested, but without the key packages
2. I removed node_modules (I don't have a yarn.lock since I've switched to npm)
3. I ran yarn it worked
4. I ran yarn dev it worked
5. I ran yarn add lodash
6. I ran yarn dev, I get the error again

/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4
const wrap = require("wrap-ansi");
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/alex/dev/micro/shopify-reports/node_modules/wrap-ansi/index.js from /Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js not supported.
Instead change the require of index.js in /Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/errors/pretty-print.js:4:14)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/handle.js:7:24)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/errors/index.js:4:16)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/cli-ux/index.js:4:16)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/command.js:7:18)
    at Object.<anonymous> (/Users/alex/dev/micro/shopify-reports/node_modules/@oclif/core/lib/index.js:5:19) {
  code: 'ERR_REQUIRE_ESM'
}

[isaacroldan]

Hey @alexblack sorry for the late reply. I followed those same steps and it works for me. Did you do yarn add lodash or yarn add lodash -W? (if it let you do the first one, then you don't have workspaces enabled and the nohoist config will be ignored). Also check that you have private: true in your package.json

Can you check in your node_module folder which dependencies are installed? If nohoist is working you should only have 1 copy of wrap-ansi-cjs and string-width-cjs. If it didn't work you'll also have a copy of wrap-ansi and string-width.

If it didn't work is because there is something misconfigured in your package.json

Hope this helps!

[alexblack]

Hmm yeah I don't have workspaces setup, I thought I should keep it that way since you'd indicated that was the problem.

So you're saying to fix the issue I need to use/enable workspaces?

[isaacroldan]

Yarn is weird and the nohoist option is only applied if workspaces are enabled (even if not really used). Should be enough with adding the workspace config in your package.json and also setting private: true in it

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.