Nx React Native Issue: `@react-native/gradle-plugin' does not exist.` + `Cannot find module '/node_modules/@react-native/codegen/lib/cli/combine
Recently, I encountered a frustrating build issue while working on my full-stack project using Nx workspace. for those who don't know about Nx, Nx is an open-source build system designed to optimize monorepo development. It offers plugins for popular frameworks and tools, enhancing developer productivity and CI performance. Key features include efficient task execution, distributed task running in CI, local and remote caching, and automated dependency updates. The issue appeared when trying to start my mobile application using:
pnpm nx run mobile:start
?(yes my full-stack app is more than front-end and back-end ??). Here’s a breakdown of the problem and how I resolved it.
start
For adding react-native to the Nx workspace you need to first install @nx/react-native?with this command:
pnpm install @nx/react-native
then you can add the react-native app to your workspace using:
pnpm nx g @nx/react-native:application --directory=apps/your-mobile-app-name
The workflow
After installing the dependencies, I attempted to start my React Native application. However, the build failed with the following error:
Error resolving plugin [id: 'com.facebook.react.settings']
> Included build '/root/node_modules/@react-native/gradle-plugin' does not exist.
Since the error pointed to a missing Gradle plugin, I installed it using:
pnpm install @react-native/gradle-plugin
then rerun it, additionally, I received another error:
Error: Cannot find module '/root/node_modules/@react-native/codegen/lib/cli/combine/combine-js-to-schema-cli.js'
These errors indicated missing dependencies related to React Native’s code generation.
so we need to install that one too:
pnpm install @react-native/codegen
After installing the missing dependencies, I cleaned the project and restarted the build process:
rm -rf node_modules && rm pnpm-lock.yaml && pnpm install
If you're facing similar issues with React Native in your Nx workspace, I hope these steps help you get your project back on track!