Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to combine Expo and React applications in the same workspace #26118

Closed
1 of 4 tasks
vaagnavanesyan opened this issue May 26, 2024 · 5 comments · Fixed by #26137
Closed
1 of 4 tasks

Unable to combine Expo and React applications in the same workspace #26118

vaagnavanesyan opened this issue May 26, 2024 · 5 comments · Fixed by #26137
Assignees
Labels
outdated scope: react-native Issues relating to React Native type: bug

Comments

@vaagnavanesyan
Copy link

Current Behavior

Workspace with only Expo application works fine but after React app is generated, neither Expo nor React apps can be launched due to project graph error.

Expected Behavior

Both Expo and React apps launched successfully

GitHub Repo

https://github.com/vaagnavanesyan/nx-expo-react-repro

Steps to Reproduce

  1. Create empty workspace: yarn create nx-workspace expo-and-react with following answers:
✔ Which stack do you want to use? · none
✔ Package-based monorepo, integrated monorepo, or standalone project? · integrated
✔ Do you want Nx Cloud to make your CI fast? · skip
  1. Add Expo plugin: nx add @nx/expo
  2. Generate Expo app: yarn nx generate @nx/expo:application --name=my-expo-app --directory=apps/my-expo-app --e2eTestRunner=none --projectNameAndRootFormat=as-provided --no-interactive
  3. Ensure that app is starting successfully: nx start my-expo-app
  4. Add React plugin: nx add @nx/react
  5. Generate React app: yarn nx generate @nx/react:application --name=my-react-app --directory=apps/my-react-app --e2eTestRunner=none --projectNameAndRootFormat=as-provided --no-interactive
  6. Find out that Expo app couldn't be started: nx start my-expo-app

Attached repo contains commits for each step to make it more easy to reproduce

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.9.0
OS     : linux-x64
yarn   : 1.22.22

nx (global)        : 19.0.4
nx                 : 19.1.0
@nx/js             : 19.1.0
@nx/jest           : 19.1.0
@nx/linter         : 19.1.0
@nx/eslint         : 19.1.0
@nx/workspace      : 19.1.0
@nx/devkit         : 19.1.0
@nx/eslint-plugin  : 19.1.0
@nx/expo           : 19.1.0
@nx/react          : 19.1.0
@nrwl/tao          : 19.1.0
@nx/web            : 19.1.0
@nx/webpack        : 19.1.0
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/expo/plugin
@nx/eslint/plugin
@nx/jest/plugin

Failure Logs

➜  expo-and-react git:(main) nx start my-expo-app --verbose

 NX   Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it. See errors below.

Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it.
  The "@nx/webpack/plugin" plugin threw an error while creating nodes from apps/my-expo-app/webpack.config.js:
    Error: Cannot find module '@expo/webpack-config'
    Require stack:
    - /home/vaagn/Work/expo-and-react/apps/my-expo-app/webpack.config.js
    - /home/vaagn/Work/expo-and-react/node_modules/@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config.js
    - /home/vaagn/Work/expo-and-react/node_modules/@nx/webpack/src/plugins/plugin.js
    - /home/vaagn/Work/expo-and-react/node_modules/@nx/webpack/plugin.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/plugins/loader.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/plugins/internal-api.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/utils/retrieve-workspace-files.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/file-utils.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/utils/package-manager.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/devkit-internals.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/utils/assert-workspace-validity.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/build-project-graph.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/project-graph/project-graph.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/utils/project-graph-utils.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/daemon/server/file-watching/file-watcher-sockets.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/daemon/server/server.js
    - /home/vaagn/Work/expo-and-react/node_modules/nx/src/daemon/server/start.js
        at Module._resolveFilename (node:internal/modules/cjs/loader:1084:15)
        at Module._load (node:internal/modules/cjs/loader:929:27)
        at c._load (node:electron/js2c/node_init:2:13672)
        at Module.require (node:internal/modules/cjs/loader:1150:19)
        at require (node:internal/modules/cjs/helpers:119:18)
        at Object.<anonymous> (/home/vaagn/Work/expo-and-react/apps/my-expo-app/webpack.config.js:1:38)
        at Module._compile (node:internal/modules/cjs/loader:1271:14)
        at Module._extensions..js (node:internal/modules/cjs/loader:1326:10)
        at Module.load (node:internal/modules/cjs/loader:1126:32)
        at Module._load (node:internal/modules/cjs/loader:967:12)

Package Manager Version

yarn@1.22.22

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

WORKAROUND

  1. Delete apps/my-expo-app/webpack.config.js
  2. Ensure that app is starting successfully: nx start my-expo-app

POSSIBLE REASON
@nx/expo:application generator uses metro as bundler for web. See app.json template. But at the same time the generator creates webpack.config.js with deprecation warning. It's unclear for me why do we need that config if we don't use Webpack, or we use it? 🤔

@Echzio
Copy link

Echzio commented May 26, 2024

+1 i also encountered this

@kalingaCoder
Copy link

kalingaCoder commented May 27, 2024

Even the android build within the expo app fails.
Run npx expo, select open Android by typing 'a'

Fails with this error:
Android Bundling failed 1249ms (C:\code\dhrona_5\node_modules\expo\AppEntry.js)
Unable to resolve "../../App" from "node_modules\expo\AppEntry.js".

#Ticket for the above

@FrozenPandaz FrozenPandaz added the scope: react-native Issues relating to React Native label May 27, 2024
@xiongemi
Copy link
Collaborator

i think you can remove the webpack.config.js in the expo app, and then nx start my-expo-app --verbose should run fine

@vaagnavanesyan
Copy link
Author

@xiongemi thanks for quick response. Yes, my issue has workaround as described 🙂
But it much better to avoid this issue at all so thank you for opening PR 👍

xiongemi added a commit that referenced this issue May 31, 2024
config.js

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26118
#25291
#23233
FrozenPandaz pushed a commit that referenced this issue Jun 3, 2024
config.js

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26118
#25291
#23233

(cherry picked from commit 2cb7ecb)
Copy link

github-actions bot commented Jul 1, 2024

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
outdated scope: react-native Issues relating to React Native type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants