got ERR_REQUIRE_ESM on implicit-children

[marwen-cherif]

Hi,
I've got a "ERR_REQUIRE_ESM" error, trying to run implicit-children codemod

Output:

C:\Users\dorki\WebstormProjects\reversio-front>npx types-react-codemod implicit-children .\packages/@savgroup-front-common/ui/src/atoms/AddAndRemove/AddAndRemove.tsx --dry
executing "C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules.bin\jscodeshift --extensions=tsx,ts "--ignore-pattern=/node_modules/" --transform C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js --dry .\packages/@savgroup-front-common/ui/src/atoms/AddAndRemove/AddAndRemove.tsx"
Processing 1 files...
Spawning 1 workers...
Running in dry mode, no files will be written!
Sending 1 files to free worker...
Browserslist: caniuse-lite is outdated. Please run the following command: yarn upgrade
C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js:141
undefined
^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\dorki\WebstormProjects\reversio-front\node_modules\babel-preset-react-app\node_modules@babel\runtime\helpers\esm\toConsumableArray.js from C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js not supported.
Instead change the require of toConsumableArray.js in C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js to a dynamic import() which is available in all CommonJS modules.
at Object.newLoader [as .js] (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\pirates\lib\index.js:141:7)
at Object. (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js:10:50)
at Module._compile (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\pirates\lib\index.js:136:24)
at Object.newLoader [as .js] (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\pirates\lib\index.js:141:7)
at setup (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\jscodeshift\src\Worker.js:91:18)
at Object. (C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\jscodeshift\src\Worker.js:45:3) {
code: 'ERR_REQUIRE_ESM'
}

Node.js v18.2.0
All done.
Results:
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 5.345seconds

[eps1lon]

Does it work with node 16?

[marwen-cherif]

Ah Thank you, it works on node 16
node 14 : KO
node 16 : OK
node 18 : KO

[eps1lon]

I want to investigate this though. Tests are currently running on 14.x, 16.x, 17.x and 18.x so I'm missing something in the testing setup

[eps1lon]

What's odd to me is why it would require C:\Users\dorki\WebstormProjects\reversio-front\node_modules\babel-preset-react-app\node_modules@babel\runtime\helpers\esm\toConsumableArray.js from C:\Users\dorki\AppData\Local\npm-cache_npx\07333c78fb78394f\node_modules\types-react-codemod\transforms\implicit-children.js

It reaches into your local node_modules from the global node_modules. That shouldn't be happening. So I'm probably not declaring some dependency correctly.

Edit: But then why is it importing some babel-runtime function from my transforms? Is codeshift transpiling the transforms? The published file does not contain any reference to toConsumeableArray: https://unpkg.com/browse/[email protected]/transforms/implicit-children.js

Edit2: I think I need to tell jscodeshift to not transform the transforms: facebook/jscodeshift#395 (comment). So the bug report actually revealed a potential optimization 🎉