[BLOCKER] cra-to-nx does not work out-of-the-box

[jakub-astrahit]

When I run a fresh install of create-react-app and then run cra-to-nx, it fails with this error:

NX 🚚 Moving your React app in your new Nx workspace

NX 🤹 Add CRA commands to workspace.json

ENOENT: no such file or directory, open '/Users/jakub/web/my-react/temp-workspace/apps/my-react/project.json'
Error: Command failed: npx nx g @nrwl/workspace:run-commands serve --project my-react --command "node ../../node_modules/.bin/react-app-rewired start" --cwd "apps/my-react"
    at checkExecSyncError (node:child_process:826:11)
    at Object.execSync (node:child_process:900:15)
    at Object.addCRACommandsToWorkspaceJson (/Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/cra-to-nx/src/lib/add-cra-commands-to-nx.js:6:21)
    at Object.<anonymous> (/Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/cra-to-nx/src/lib/cra-to-nx.js:67:34)
    at Generator.next (<anonymous>)
    at /Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/tslib/tslib.js:113:16)
    at Object.createNxWorkspaceForReact (/Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/cra-to-nx/src/lib/cra-to-nx.js:38:20)
    at Object.<anonymous> (/Users/jakub/.npm/_npx/4b7b36b90dc25906/node_modules/cra-to-nx/src/index.js:7:13) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 7322,
  stdout: null,
  stderr: null
}

What's the problem please?

[sgltkn]

I got the same issue. Can u help with this?

[Ryandev]

Just to add, I'm having the same issue with CRA v5

Steps to reproduce

npx create-react-app@5.0.0 my-app-test
cd my-app-test
npx cra-to-nx@latest

Looks like there may be a fix here: https://github.com/nrwl/cra-to-nx/commit/4a81360283cef5c639ad16001f9e93a86012dcd7

[jakub-astrahit]

There is a new issue with clean installation. When I install fresh nx and then use cra-to-nx package, it finishes the installation successfully but the project does not start out of the box. This is the errors I am getting:

Compiled with problems:X

ERROR in ./src/App.css (../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!../../node_modules/source-map-loader/dist/cjs.js!./src/App.css)

Module Error (from ../../node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-preset-env'
Require stack:
- /home/app/node_modules/postcss-loader/dist/utils.js
- /home/myproj/node_modules/postcss-loader/dist/index.js
- /home/myproj/node_modules/postcss-loader/dist/cjs.js
- /home/myproj/node_modules/loader-runner/lib/loadLoader.js
- /home/myproj/node_modules/loader-runner/lib/LoaderRunner.js
- /home/myproj/node_modules/webpack/lib/NormalModule.js
- /home/myproj/node_modules/webpack-manifest-plugin/dist/index.js
- /home/myproj/node_modules/react-scripts/config/webpack.config.js
- /home/myproj/node_modules/@craco/craco/lib/cra.js
- /home/myproj/node_modules/@craco/craco/scripts/start.js

(@/home/myproj/apps/myapp/src/App.css)

ERROR in ./src/index.css (../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!../../node_modules/source-map-loader/dist/cjs.js!./src/index.css)

Module Error (from ../../node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-preset-env'
Require stack:
- /home/myproj/node_modules/postcss-loader/dist/utils.js
- /home/myproj/node_modules/postcss-loader/dist/index.js
- /home/myproj/node_modules/postcss-loader/dist/cjs.js
- /home/myproj/node_modules/loader-runner/lib/loadLoader.js
- /home/myproj/node_modules/loader-runner/lib/LoaderRunner.js
- /home/myproj/node_modules/webpack/lib/NormalModule.js
- /home/myproj/node_modules/webpack-manifest-plugin/dist/index.js
- /home/myproj/node_modules/react-scripts/config/webpack.config.js
- /home/myproj/node_modules/@craco/craco/lib/cra.js
- /home/myproj/node_modules/@craco/craco/scripts/start.js

(@/home/myproj/apps/myapp/src/index.css)

EDIT: I found out that you need to run npm install inside your CRA application. In my example above, I need to run npm install inside the /home/myproj/apps/myapp. After the installation, the module postcss-preset-env gets installed.

Maybe this npm install step should be included in cra-to-nx script?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[jakub-astrahit]

Has this been fixed yet?

[peter-coastpay-com]

attention: for anyone considering migrating to NX from CRA

id agree with the title of this problem, the script does not accomplish what it intends to and leaves the user is a state that is very difficult to troubleshoot.

To anyone currently using CRA and considering migrating to NX, I would re-consider as the challenge will likely not be worth the effort. Save NX for your next greenfield project.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[mandarini]

I will be closing this, since I think it has been fixed. Please feel free to reopen if you think the issue persists.

Here is our guide for React + Nx.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.