ionic-team / ionic-team/ionic-cli

[Bug]: All capacitor commands fail with ERR_REQUIRE_ESM

Abierto
#5,081 6 comentarios 0 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
2k
Forks
682
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### 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

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

### Platforms Affected

- [X] iOS
- [X] Android
- [X] 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. (/.../node_modules/@ionic/utils-terminal/dist/format.js:9:21)
at Object. (/.../node_modules/@ionic/utils-terminal/dist/index.js:6:22)
at Object. (/.../node_modules/@ionic/cli-framework-output/dist/index.js:5:26)
at Object. (/.../node_modules/@capacitor/cli/dist/log.js:5:32)
at Object. (/.../node_modules/@capacitor/cli/dist/config.js:10:15)
at Object. (/.../node_modules/@capacitor/cli/dist/index.js:7:18)
at Object. (/.../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 "string-width@5.1.2"
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 "string-width@4.2.3"
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 init`works 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/android@5.7.0
yarn add v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@vitejs/plugin-legacy > esbuild-plugin-browserslist@0.10.0" 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/android@5.7.0
info All dependencies
└─ @capacitor/android@5.7.0
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)

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.