Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: All capacitor commands fail with ERR_REQUIRE_ESM #5081

Open
3 tasks done
thomasakarlsen opened this issue Feb 15, 2024 · 6 comments
Open
3 tasks done

[Bug]: All capacitor commands fail with ERR_REQUIRE_ESM #5081

thomasakarlsen opened this issue Feb 15, 2024 · 6 comments
Labels
triage

Comments

@thomasakarlsen
Copy link

thomasakarlsen commented Feb 15, 2024 •
edited
Loading

Capacitor Version

(gathered after my temporary fix, see details below)

Latest Dependencies:

@capacitor/cli: 5.7.0
@capacitor/core: 5.7.0
@capacitor/android: 5.7.0
@capacitor/ios: 5.7.0

Installed Dependencies:

@capacitor/android: 5.7.0
@capacitor/ios: not installed
@capacitor/cli: 5.7.0
@capacitor/core: 5.7.0

Other API Details

npm: 10.2.3
node: 18.19.0 (however I did also experience this on 20.11.0)
yarn: 1.22.21

Platforms Affected

  • iOS
  • Android
  • Web

Current Behavior

When trying to run ionic capacitor run android for the first time in a fresh ionic app the following error appears when the ionic cli reaches the step where this capacitor init MyApp io.ionic.starter --web-dir dist is run:

> capacitor init MyApp io.ionic.starter --web-dir dist
/.../node_modules/@ionic/utils-terminal/dist/format.js:9
const stringWidth = require("string-width");
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/string-width/index.js from /.../node_modules/@ionic/utils-terminal/dist/format.js not supported.
Instead change the require of index.js in /.../node_modules/@ionic/utils-terminal/dist/format.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/.../node_modules/@ionic/utils-terminal/dist/format.js:9:21)
    at Object.<anonymous> (/.../node_modules/@ionic/utils-terminal/dist/index.js:6:22)
    at Object.<anonymous> (/.../node_modules/@ionic/cli-framework-output/dist/index.js:5:26)
    at Object.<anonymous> (/.../node_modules/@capacitor/cli/dist/log.js:5:32)
    at Object.<anonymous> (/.../node_modules/@capacitor/cli/dist/config.js:10:15)
    at Object.<anonymous> (/.../node_modules/@capacitor/cli/dist/index.js:7:18)
    at Object.<anonymous> (/.../node_modules/@capacitor/cli/bin/capacitor:17:11) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.19.0
[ERROR] An error occurred while running subprocess capacitor.
        
        capacitor init MyApp io.ionic.starter --web-dir dist exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

Researching this issue I ran yarn why string-width which resulted in:

yarn why v1.22.21
[1/4] 🤔  Why do we have the module "string-width"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "@vue#test-utils#js-beautify#glob#jackspeak#@isaacs#cliui" depends on it
   - Hoisted from "@vue#test-utils#js-beautify#glob#jackspeak#@isaacs#cliui#string-width"
   - Hoisted from "@vue#test-utils#js-beautify#glob#jackspeak#@isaacs#cliui#wrap-ansi#string-width"
info Disk size without dependencies: "172KB"
info Disk size with unique dependencies: "308KB"
info Disk size with transitive dependencies: "328KB"
info Number of shared dependencies: 4
✨  Done in 0.16s.

Looking at the recent releases of @vue/test-utils I found that in versions 2.4.1 and 2.4.2 they updated their dependencies.
By hard locking my version of @vue/test-utils to 2.4.0 and performing a clean install by deleting my yarn.lock file and node_modules followed by yarn install I was able to run capacitor init MyApp io.ionic.starter --web-dir dist without any errors.

Running yarn why string-width now results in:

yarn why v1.22.21
[1/4] 🤔  Why do we have the module "string-width"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "@ionic#utils-terminal" depends on it
   - Hoisted from "@ionic#utils-terminal#string-width"
   - Hoisted from "wrap-ansi#string-width"
   - Hoisted from "cypress#cli-table3#string-width"
   - Hoisted from "@capacitor#cli#@ionic#utils-subprocess#@ionic#utils-terminal#string-width"
   - Hoisted from "cypress#listr2#cli-truncate#string-width"
   - Hoisted from "@capacitor#cli#@ionic#utils-subprocess#@ionic#utils-process#@ionic#utils-terminal#string-width"
   - Hoisted from "cypress#listr2#log-update#wrap-ansi#string-width"
info Disk size without dependencies: "20KB"
info Disk size with unique dependencies: "128KB"
info Disk size with transitive dependencies: "148KB"
info Number of shared dependencies: 3
✨  Done in 0.14s.

I do not know exactly what changed with the dependencies of @vue/test-utils after version 2.4.0 but something there seems to cause yarn to disregard the manifest of @ionic/utils-terminal and install major versions of some dependencies that are not supported.

Expected Behavior

ionic capacitor run android or even capacitor initworks without any errors

This is my output after locking @vuejs/test-utils to version 2.4.0:

> capacitor init MyApp io.ionic.starter --web-dir dist
✔ Creating capacitor.config.ts in /.../ in 1.68ms
[success] capacitor.config.ts created!

Next steps: 
https://capacitorjs.com/docs/getting-started#where-to-go-next
[OK] Integration capacitor added!
> yarn add --exact --non-interactive @capacitor/[email protected]
yarn add v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@vitejs/plugin-legacy > [email protected]" has unmet peer dependency "esbuild@~0.19.2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @capacitor/[email protected]
info All dependencies
└─ @capacitor/[email protected]
Done in 2.16s.
> capacitor add android
[capacitor] ✔ Adding native android project in android in 15.85ms
[capacitor] ✔ add in 16.18ms
[capacitor] [warn] sync could not run--missing dist directory.
[capacitor] [success] android platform added!
[capacitor] Follow the Developer Workflow guide to get building:
[capacitor] https://capacitorjs.com/docs/basics/workflow
? Which device would you like to target? (Use arrow keys)
....

Project Reproduction

https://github.com/thomasakarlsen/capacitor-esm-bug

Additional Information

I had the same issue as ionic-team/capacitor#7126 and did some more digging to figure out why it was happening.
Based on the results of my debugging I am not sure if this is the right package to create the issue for, but it is the capacitor init command that fails. Let me know if the issue should be made elsewhere.

For anyone else experiencing this issue the temporary solution seems to be locking @vuejs/test-utils to version 2.4.0 (and doing a clean install of dependencies)
@thomasakarlsen thomasakarlsen changed the title [Bug]: All npx cap commands fail with ERR_REQUIRE_ESM [Bug]: All capacitor commands fail with ERR_REQUIRE_ESM Feb 15, 2024
@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Feb 15, 2024

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

@ionitron-bot ionitron-bot bot removed the triage label Feb 15, 2024
@thomasakarlsen
Copy link
Author

I have added a reproduction repo: https://github.com/thomasakarlsen/capacitor-esm-bug

@thomasakarlsen
Copy link
Author

Regarding the reproduction repo:
It seems like cypress is having a similar issue making it impossible to run yarn install on it. I have no clue how to fix this.
Again, this repo is just a fresh setup of ionic start --type=vue so to investigate the specific issue I have talked about here it is best to create a new ionic app locally.

There is something really weird going on with the dependencies here...

@thomasakarlsen
Copy link
Author

Seems like deleting the yarn.lock file and then running yarn install somehow produces a dependency graph that properly works even without setting @vue/test-utils to 2.4.0.

Interestingly this works both for the reproduction repo and if you use ionic start --type=vue.

@jcesarmobile jcesarmobile transferred this issue from ionic-team/capacitor Feb 26, 2024
@ionitron-bot ionitron-bot bot added the triage label Feb 26, 2024
@jcesarmobile
Copy link
Member

Thanks for the issue, but it's an Ionic CLI issue, not a Capacitor issue, I've moved it to the appropriate repository.

The problem is, as you have figured out by now, that something is installing string-width version 5.x, which is a ESM version and the Ionic CLI doesn't support ESM dependencies.
When you remove the lock file and reinstall, then the 4.x version is installed and your app works.

Ionic CLI would need to be updated to support ESM dependencies for this to be fixed, but also some people mention that using yarn 4 also fixes the issue.

asika32764 added a commit to simular/authman-app that referenced this issue Mar 20, 2024
@asika32764
Add ios & re install yarn because this: ionic-team/ionic-cli#5081
d352104
@vhermecz
Copy link

I was facing this same issue:

I can confirm that yarn upgrade to yarn v4 did resolve the issue:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vhermecz @jcesarmobile @thomasakarlsen