[email protected] breaks expo web when importing from workspace lib

[leggomuhgreggo]

Current Behavior

Unable to import components from workspace ui lib into expo web app

When running yarn nx run repro-app:run-web it throws an error TypeError: this.getOptions is not a function

Note: By itself, the app will load as expected. It's only when importing components from a workspace library

custom run-web target

``` "run-web": { "executor": "nx:run-commands", "options": { "cwd": "apps/repro-app", "command": "npx expo-cli start --web" } }, ```

error message

/Users/exampleuser/projects/explorations/nx-repro-workspace/libs/repro-ui/src/index.ts
Module build failed (from /Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/@nrwl/webpack/src/utils/web-babel-loader.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/babel-loader/lib/index.js:46:28)
    at Object.<anonymous> (/Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/babel-loader/lib/index.js:41:12)

Expected Behavior

The expo web app should be able to import from workspace libraries without issue.

GitHub Repo

https://github.com/leggomuhgreggo/nx-issue-expo-babel

Steps to Reproduce

1. clone repo + install
2. start app
3. observe error

git clone [email protected]:leggomuhgreggo/nx-issue-expo-babel.git \
  && cd $_
  && yarn install
  && yarn nx run repro-app:run-web

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.15.1
   OS   : darwin x64
   yarn : 1.22.19
   
   nx : 15.6.3
   @nrwl/angular : Not Found
   @nrwl/cypress : Not Found
   @nrwl/detox : 15.6.3
   @nrwl/devkit : 15.6.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.3
   @nrwl/expo : 15.6.3
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.3
   @nrwl/js : 15.6.3
   @nrwl/linter : 15.6.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.6.3
   @nrwl/workspace : 15.6.3
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

✨  Done in 0.92s.

Failure Logs

/Users/exampleuser/projects/explorations/nx-repro-workspace/libs/repro-ui/src/index.ts
Module build failed (from /Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/@nrwl/webpack/src/utils/web-babel-loader.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/babel-loader/lib/index.js:46:28)
    at Object.<anonymous> (/Users/exampleuser/projects/explorations/nx-repro-workspace/node_modules/babel-loader/lib/index.js:41:12)

Additional Information

My guess is this issue is related to the recent babel-loader@^9.1.2 [#14527] which drops webpack 4 support.

I created a branch on the example repo, with a workaround where I added babel-loader to the yarn resolutions config -- and then also added @babel/preset-react which was required by an error in the resoltuions workaround.

[groger]

same here!

[xiongemi]

this is the same issue #14789. it should be fixed in nx 15.730

[github-actions]

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.