pragmatic-drag-and-drop

pragmatic-drag-and-drop copied to clipboard

I've tried to follow the instructions here: https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/react-beautiful-dnd-migration/code

But I can't "select the codemod based on which version of react-beautiful-dnd you are migrating from" as there are no adoption codemods visible in the list when I run the command.

I see this:

Have you tried installing the migration package first?

OK, I've found the issue.

I had installed the package but I'm in a Yarn monorepo (with nodeLinker: node-modules configured). The codemods will not appear unless I'm at the project root but my current working directory was the directory containing my app so they weren't appearing.

I do get a few more errors though:

Error: Cannot find module '@atlaskit/codemod-utils'
Require stack:
- /home/seb.insua@[redacted].com/dev/[redacted]/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/0.1.0-adoption-from-rbd-13.tsx
- /home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/Worker.js

I fixed that by manually installing this package @atlaskit/codemod-utils.

But then I get these:

client/src/grid/ColorPicker/colors.ts Transformation error (did not recognize object of type "TSSatisfiesExpression")
Error: did not recognize object of type "TSSatisfiesExpression"
    at Object.getFieldNames (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/types.js:660:19)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:184:36)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at Visitor.PVp.visit (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:104:29)
    at Object.visit (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:80:55)
    at Collection.<anonymous> (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/collections/Node.js:53:14)
    at Array.forEach (<anonymous>)
    at Collection.find (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/collections/Node.js:44:18)
    at Collection.find (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/Collection.js:413:43)
    at getImportDeclarationsForPackage (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:15:6)
    at getImportDeclarationsForRbd (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:23:10)
    at shouldApplyTransform (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:30:24)
    at /home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/codemod-utils/dist/cjs/utils/index.js:88:32

These don't appear to stop the transforms from working so the migration completes successfully.

Interesting! Can you please paste the full command you are trying to run?

Happy to re-open this if more information comes to light

OK, I've found the issue.

I had installed the package but I'm in a Yarn monorepo (with nodeLinker: node-modules configured). The codemods will not appear unless I'm at the project root but my current working directory was the directory containing my app so they weren't appearing.

I do get a few more errors though:

Error: Cannot find module '@atlaskit/codemod-utils'
Require stack:
- /home/seb.insua@[redacted].com/dev/[redacted]/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/0.1.0-adoption-from-rbd-13.tsx
- /home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/Worker.js

I fixed that by manually installing this package @atlaskit/codemod-utils.

But then I get these:

client/src/grid/ColorPicker/colors.ts Transformation error (did not recognize object of type "TSSatisfiesExpression")
Error: did not recognize object of type "TSSatisfiesExpression"
    at Object.getFieldNames (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/types.js:660:19)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:184:36)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:166:20)
    at Visitor.PVp.visit (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:104:29)
    at Object.visit (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/ast-types/lib/path-visitor.js:80:55)
    at Collection.<anonymous> (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/collections/Node.js:53:14)
    at Array.forEach (<anonymous>)
    at Collection.find (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/collections/Node.js:44:18)
    at Collection.find (/home/seb.insua@[redacted]/.npm/_npx/1c2e1521d81af2d5/node_modules/jscodeshift/src/Collection.js:413:43)
    at getImportDeclarationsForPackage (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:15:6)
    at getImportDeclarationsForRbd (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:23:10)
    at shouldApplyTransform (/home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/codemods/utils.tsx:30:24)
    at /home/seb.insua@[redacted]/dev/maven.exe.ui/node_modules/@atlaskit/codemod-utils/dist/cjs/utils/index.js:88:32

These don't appear to stop the transforms from working so the migration completes successfully.

I have the same problem, but it has been resolved by manually installing @atlaskit/codemod-utils.

I had the exact same issue and solution. I had to install both this package and @atlaskit/codemod-utils in the project subdirectory, then run npx @atlaskit/codemod-cli --parser tsx --extensions ts,tsx,js path/to/my/src from the project root. Thanks to sebinsua for the solution!

Same thing I've installed @atlaskit/[email protected], @atlaskit/[email protected], @atlaskit/[email protected] and [email protected] After migration command I'm getting "No codemodes available. Please make sure you have the latest version of the packages you are trying to upgrade before running the codemod"

P.s. command that I'm using to migrate npx @atlaskit/codemod-cli --parser tsx --extensions ts,tsx,js src/