modern-teal

Error using codemod when upgrading to V5

Hi, I decided to migrate from v4 to v5, and I was trying to use the following "TS" codemod:

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

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

(yes, I put the correct path to src when I ran it) I'm getting the following errors:

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js from ...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 /Users/nadavschwartz/Documents/GitHub/mindLabs-website/node_modules/@tanstack/react-query/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js from ...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 /Users/nadavschwartz/Documents/GitHub/mindLabs-website/node_modules/@tanstack/react-query/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

This error repeats dozens of times, and eventually the script stops with no updates/changes and the following output:

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

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

I'm using Nextjs + TS if it makes any difference

14 Replies

modern-tealOP•2y ago

bump

xenial-black•2y ago

there is an open discussion on github regarding this

xenial-black•2y ago

would be great if you could send a PR? https://github.com/TanStack/query/discussions/7048#discussioncomment-8734955

GitHub

Issue with Running Codemods for Migrating to React Query v5 Due to ...

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 gu...

modern-tealOP•2y ago

Ah! funny! That is me! I've added a comment about your suggestion, but it didn't work. I would love to share a way to reproduce that error, but I can't share the repo as it's private and work-related, and I wouldn't know where to start to isolate anything as there are over 60 components and 50 pages. is there a way or an idea you can share on how I can create a minimized version of my current project in an attempt to reproduce this?

xenial-black•2y ago

ah I see 😅 . unfortunately I don't know too much about the whole ESM stuff and the codemods, just that they are written in JS and cjs and we then copy them over to distribute them with the react-adapter.

modern-tealOP•2y ago

It's okay! you mentioned setting up a package.json. I can try it! where exactly did you have in mind to set it up? within the codemods directory? under build? What would be the content in that file?

xenial-black•2y ago

within the codemods directory so that it will be copied over

modern-tealOP•2y ago

I tried adding a package.json within codemod with the content of type: commonjs I also tried moving it to be under src, both won't work. it cries about types definions for a ts file.

xenial-black•2y ago

we actually have one, and it says type: commonjs https://github.com/TanStack/query/blob/137233b7a857575804bb362ae5e9b1c7e4326e65/packages/query-codemods/package.json#L13 maybe we just need to copy it?

GitHub

query/packages/query-codemods/package.json at 137233b7a857575804bb3...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

modern-tealOP•2y ago

I also tried going down in versions to earlier versions where codemods had code changes, and I still get the same errors.

xenial-black•2y ago

seems like this doesn't copy over the package.json 🤔 https://github.com/TanStack/query/blob/ea66e94c4743cc258470f2d6666c8a4ebb3f3edf/packages/react-query/package.json#L44

GitHub

query/packages/react-query/package.json at ea66e94c4743cc258470f2d6...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

modern-tealOP•2y ago

That's weird! but even when I add package.json directly into the codemod, or anywhere within the folder, I get the same errors. so I'm not entirely sure that's the issue? it almost seems like the "type: module" is over-writing everything.

xenial-black•2y ago

does it still say the nearest package.json is esm ? maybe it looks down from where the codemod is executed instead of up? can you cd into the codemod dir an run it there directly, or is that what you're doing anyway?

modern-tealOP•2y ago

one quirky thing I noticed, when I downgraded to react-query@5.8.2 , and I run the same codemod, I get infinite loop of errors related to types and syntax errors. I'll try to cd into the codemod and do it. give me a moment! still won't work. I'm getting the original error about ES modules. However! I have great news! when I cd into node_modules/@tanstack/react-query/build/codemods and create a package.json file with

{
    "type": "commonjs"
}

{
    "type": "commonjs"
}

and then I run

npx jscodeshift@latest /Users/nadavschwartz/Documents/GitHub/website/lib <--- *updated path* \
  --extensions=ts,tsx \
  --parser=tsx \
  --transform=src/v5/remove-overloads/remove-overloads.js <-- updated path to the remove overloads because we're inside the codemods directory

npx jscodeshift@latest /Users/nadavschwartz/Documents/GitHub/website/lib <--- *updated path* \
  --extensions=ts,tsx \
  --parser=tsx \
  --transform=src/v5/remove-overloads/remove-overloads.js <-- updated path to the remove overloads because we're inside the codemods directory

it works! I still get some "could not be transformed into the new syntax. Please do this manually." but seems to be running! I have 114 unmodified cases where the block of code is using invalidateQueries and it won't update it. according to the docs,

- queryClient.invalidateQueries(key, filters, options)
+ queryClient.invalidateQueries({ queryKey, ...filters }, options)

- queryClient.invalidateQueries(key, filters, options)
+ queryClient.invalidateQueries({ queryKey, ...filters }, options)

Here's an example of usage with the output "could not be transformed"

  const handleDeleteAssignmentSet = () => {
    const { assignmentIdToDelete, assignmentType } = deleteAssignmentData;
    deleteAssignments(
      { assignmentType, assignmentIdToDelete },
      {
        onSuccess: async () => {
          await queryClient.invalidateQueries({
            queryKey: [
              QueryKeys.ALL_CLASSROOMS_ASSIGNMENTS,
              data?.user?.id,
            ]
          });
          showToast('Assignment deleted successfully', 'success');
          onClose();
        },
      }
    );
  };

  const handleDeleteAssignmentSet = () => {
    const { assignmentIdToDelete, assignmentType } = deleteAssignmentData;
    deleteAssignments(
      { assignmentType, assignmentIdToDelete },
      {
        onSuccess: async () => {
          await queryClient.invalidateQueries({
            queryKey: [
              QueryKeys.ALL_CLASSROOMS_ASSIGNMENTS,
              data?.user?.id,
            ]
          });
          showToast('Assignment deleted successfully', 'success');
          onClose();
        },
      }
    );
  };

By any chance do you know which part of the codemod I should update to have it working? 114 cases manually would be frustrating to update :/ I'd rather spend the hours of debugging this instead of doing DRY work :/ I also noticed that it won't update stuff like isLoading -> isPending or the new structure of the prefetchQuery which is similar issue to the invalidateQueries.

Gaming

Programming

Error using codemod when upgrading to V5

Did you find this page helpful?