Issue with Running Codemods for Migrating to React Query v5 Due to ESM Compatibility

[nadavschwartz]

I've encountered a problem when trying to run the provided codemods for migrating to React Query v5, specifically related to the ESM compatibility issues in Node.js. I followed the migration guide and used jscodeshift to apply the remove-overloads.js codemod, but the process fails due to ESM module loading constraints.

Summary

I've encountered a problem when trying to run the provided codemods for migrating to React Query v5 (from v4), specifically related to the "ESM compatibility issues in Node.js". I followed the migration guide and used jscodeshift to apply the remove-overloads.js codemod, but the process fails due to ESM module loading constraints.

Environment

• Node.js Version: 18.18.2
• React Query Version: v5
• Operating System: macOS 14.1.1

Steps I followed

1. Installed React Query v5 following the official migration guide.
2. From the root of my application, attempted to run the jscodeshift tool with the provided codemod script for removing method overloads. I used "." in the command to specify the current directory as the target for the transformation, indicating I'm running it from the root application path:

   npx jscodeshift@latest .  \
     --extensions=ts,tsx \
     --parser=tsx \
     --transform=./node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js
   

Encountered the following error indicating an issue with ESM compatibility:

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js from /path/to/npm/_npx/a3dac9416cb5dcf1/node_modules/jscodeshift/src/Worker.js not supported. remove-overloads.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename remove-overloads.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /path/to/node_modules/@tanstack/react-query/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

the output at the end of the script is as follows:

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

[TkDodo]

@lachlancollins does tsup add type:module to the packages we ship, because in the checked-in package.json files, it's not there. If that's the case - do we need to rename the codemod files to .cjs ?

@nadavschwartz can you try to just rename the file to remove-overloads.cjs in your node_modules and see if it works?

[TkDodo]

maybe we need our own package.json then for the codemods?

[nadavschwartz]

Would it help if I shared with you my current package.json? perhaps it'll be of any benefit!
here it is: link

[smashercosmo]

One solution is to temporary change type: "module" to type: "commonjs" in react-query's package.json when running the script.

[ontanj]

the issue is resolved either by renaming all CommonJS files in codemods to .cjs, or by adding the package.json in the published codemods directory. since the project mainly uses ES modules it makes sense to name the CommonJS files .cjs. I created a pull request #7333