[Bug?]: Generate page command not working

tanmaythole commented 1 month ago

What's not working?

On executing yarn redwood generate page home /, I am getting error Error [ERR_REQUIRE_ESM]: require() of ES Module /<project-path>/node_modules/execa/index.js from /<project-path>/node_modules/@redwoodjs/internal/dist/generate/graphqlCodeGen.js not supported.

Stacktrace:

Error [ERR_REQUIRE_ESM]: require() of ES Module /<project-path>/node_modules/execa/index.js from /<project-path>/node_modules/@redwoodjs/internal/dist/generate/graphqlCodeGen.js not supported.
Instead change the require of index.js in /<project-path>/node_modules/@redwoodjs/internal/dist/generate/graphqlCodeGen.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/<project-path>/node_modules/@redwoodjs/internal/dist/generate/graphqlCodeGen.js:31:37)
    at Object.<anonymous> (/<project-path>/node_modules/@redwoodjs/internal/dist/generate/possibleTypes.js:18:23)
    at Object.<anonymous> (/<project-path>/node_modules/@redwoodjs/internal/dist/generate/generate.js:15:22)
    at Object.<anonymous> (/<project-path>/node_modules/@redwoodjs/cli/dist/commands/generate/cell/cell.js:39:23)
    at /<project-path>/node_modules/require-directory/index.js:76:17
    at Array.forEach (<anonymous>)
    at requireDirectory (/<project-path>/node_modules/require-directory/index.js:59:24)
    at /<project-path>/node_modules/require-directory/index.js:67:15
    at Array.forEach (<anonymous>)
    at Object.requireDirectory (/<project-path>/node_modules/require-directory/index.js:59:24)
    at _.addDirectory (/<project-path>/node_modules/yargs/build/index.cjs:1:5492)
    at te.commandDir (/<project-path>/node_modules/yargs/build/index.cjs:1:33384)
    at builder (/<project-path>/node_modules/@redwoodjs/cli/dist/commands/generate.js:52:4)
    at _.applyBuilderUpdateUsageAndParse (/<project-path>/node_modules/yargs/build/index.cjs:1:7435)
    at _.runCommand (/<project-path>/node_modules/yargs/build/index.cjs:1:7078)
    at [runYargsParserAndExecuteCommands] (/<project-path>/node_modules/yargs/build/index.cjs:1:58539)
    at te.parse (/<project-path>/node_modules/yargs/build/index.cjs:1:40478)
    at runYargs (/<project-path>/node_modules/@redwoodjs/cli/dist/index.js:151:14)
    at async /<project-path>/node_modules/@redwoodjs/cli/dist/index.js:105:7
    at async main (/<project-path>/node_modules/@redwoodjs/cli/dist/index.js:94:3)

How do we reproduce the bug?

No response

What's your environment? (If it applies)

System:
    OS: macOS 14.4
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.3 - /private/var/folders/yp/66sqrvtn3yb5xzn3z2hvbzs80000gp/T/xfs-226bad5a/node
    Yarn: 4.3.0 - /private/var/folders/yp/66sqrvtn3yb5xzn3z2hvbzs80000gp/T/xfs-226bad5a/yarn
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Safari: 17.4
  npmPackages:
    @redwoodjs/core: 7.7.3 => 7.7.3 
    @redwoodjs/project-config: 7.7.3 => 7.7.3

Are you interested in working on this?

[ ] I'm interested in working on this

Josh-Walker-GM commented 1 month ago

Hey @tanmaythole 👋

I just tried to reproduce this issue with the following steps:

yarn create redwood-app issue-reproduction
cd issue-reproduction
yarn redwood generate page home /

The generator command worked as expected and didn't error out in the way you see in your project.

I see from the environment information you are using node v18. Can you please upgrade to node v20 and try again to see if that fixes your issue? If not it would also be good to confirm what yarn why execa produces.

tanmaythole commented 1 month ago

Hey @Josh-Walker-GM

Thanks for the prompt reply. I have upgraded the node version to 20, but still no luck.

The output of yarn why execa is:

├─ @commitlint/cli@npm:19.3.0
│  └─ execa@npm:8.0.1 (via npm:^8.0.1)
│
├─ @commitlint/read@npm:19.2.1
│  └─ execa@npm:8.0.1 (via npm:^8.0.1)
│
├─ @commitlint/rules@npm:19.0.3
│  └─ execa@npm:8.0.1 (via npm:^8.0.1)
│
├─ @redwoodjs/cli-helpers@npm:7.7.3
│  └─ execa@npm:5.1.1 (via npm:5.1.1)
│
├─ @redwoodjs/cli@npm:7.7.3
│  └─ execa@npm:5.1.1 (via npm:5.1.1)
│
├─ default-gateway@npm:6.0.3
│  └─ execa@npm:5.1.1 (via npm:^5.0.0)
│
├─ jest-changed-files@npm:29.7.0
│  └─ execa@npm:5.1.1 (via npm:^5.0.0)
│
└─ lint-staged@npm:15.2.8
   └─ execa@npm:8.0.1 (via npm:~8.0.1)

This issue occurs when I set up commit-lint for the project using yarn add -D @commitlint/cli @commitlint/config-conventional. Otherwise, the generator command works as expected.

Josh-Walker-GM commented 3 weeks ago

I'm not sure of the next steps here @tanmaythole. I did try reproducing by adding the same dependencies but didn't see the issue occur. I do believe that this is likely a real issue though and probably comes down to the fact we're on an older version of execa than other packages might be.

I'll ask the team if they have any suggestions on next steps here.

tanmaythole commented 3 weeks ago

Hey @Josh-Walker-GM , I looked into the root cause of the issue and found that it occurs due to different versions of execa. In Redwood, version 5.1.1 is being used, which doesn't support ECMAScript modules. The issue arises after adding dependencies that require a newer version of execa, which does support ECMAScript modules.

To resolve this in Redwood, we can either update the execa version or check which version is being used and then act accordingly.

redwoodjs / redwood