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.

Sign up for GitHub

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

Jump to bottom

Libraries that use nullish coalescing don't work on Expo web #19677

Open
gabrieldonadel opened this issue Oct 25, 2022 · 7 comments
Open

Libraries that use nullish coalescing don't work on Expo web #19677

gabrieldonadel opened this issue Oct 25, 2022 · 7 comments
Labels
Issue accepted Platform: web Using Expo in the browser

Comments

@gabrieldonadel
Copy link
Member

Summary

It seems that Expo web does not support libraries that use nullish coalescing (??), from my testing this seems to only affects libraries and using ?? inside an expo project works as expected. I imagine this happens because expo code is transpiled by babel and node_modules are not.

This is the error that I get when trying to use a lib with nullish coalescing
image

Uncaught Error: Module parse failed: Unexpected token (90:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

This same library works just fine on Android and iOS. I would like to confirm if this is a bug or if it is expected from libs to treat this if they want to support Expo web

What platform(s) does this occur on?

Web

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.18.0 - ~/.volta/tools/image/node/16.18.0/bin/node
      Yarn: 1.22.11 - ~/.volta/tools/image/yarn/1.22.11/bin/yarn
      npm: 8.19.2 - ~/.volta/tools/image/node/16.18.0/bin/npm
    Managers:
      CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    IDEs:
      Android Studio: 2021.2 AI-212.5712.43.2112.8815526
      Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
    npmPackages:
      @expo/webpack-config: ^0.17.0 => 0.17.2 
      expo: ~46.0.16 => 46.0.16 
      react: 18.0.0 => 18.0.0 
      react-dom: 18.0.0 => 18.0.0 
      react-native: 0.69.6 => 0.69.6 
      react-native-web: ~0.18.7 => 0.18.9 
    npmGlobalPackages:
      expo-cli: 6.0.6
    Expo Workflow: managed

Minimal reproducible example

Weirdly enough this works just fine when using snack -> https://snack.expo.dev/@gabrieldonadel/387b69, I guess they have their own custom webpack.config.js

Locally reproducing this is just a matter of importing a library that uses nullish coalescing, e.g. rn-material-ui-textfield

Code Example
  1. Create a new project using npx create-expo-app test-rn
  2. Run npx expo install react-dom react-native-web @expo/webpack-config to add web support
  3. Install rn-material-ui-textfield npm add rn-material-ui-textfield
  4. Update App.js to the following code:
import { View } from "react-native";
import { TextField } from "rn-material-ui-textfield";

export default function App() {
 return (
   <View>
     <TextField />
   </View>
 );
}

Temporary workaround

Update your webpack.config.js file (or create it if you don't have one) to make babel transpile the library that you're facing issues with, e.g.

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["rn-material-ui-textfield"],
      },
    },
    argv
  );
  return config;
};
@gabrieldonadel gabrieldonadel added the needs validation Issue needs to be validated label Oct 25, 2022
@Simek Simek added Platform: web Using Expo in the browser Issue accepted and removed needs validation Issue needs to be validated labels Oct 25, 2022
@expo-bot
Copy link
Collaborator

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

@Simek
Copy link
Collaborator

Simek commented Oct 25, 2022

Refs: https://github.com/expo/expo/actions/runs/3316586724/jobs/5478549650

@Simek Simek mentioned this issue Oct 27, 2022
Merged
2 tasks
@marcusradell
Copy link

We are blocked from using expo because of this. The quick fix led to more errors. We might be able to resolve them, but it's not looking good right now.

We get issues with .? in @trpc libs.

@devYonz
Copy link

devYonz commented Nov 30, 2022

Same issue, EAS fails when bundling for iOS for a project using Tinybase. Are there any workarounds using babel.config.js?

@Kobusvdwalt
Copy link

Any update on this ? Pretty big problem if you want to use something like trpc.

@beepsoft beepsoft mentioned this issue Feb 14, 2023
Closed
@beepsoft
Copy link

The nhost client is also affected. nhost/nhost#1607

@beepsoft
Copy link

beepsoft commented Feb 14, 2023 •
edited

I could make it work with @gabrieldonadel's babel fix. However, it seems that it also fails for iOS (and Android) as well.

I have this test repo:

https://github.com/beepsoft/nhost-js-expo-web-problem2

If I run it in the iOS simulator it will fail at

@nhost/hasura-auth-js/dist/index.cjs.js

because of a ?? operator.

Is there maybe an equivalent of dangerouslyAddModulePathsToTranspile in metro.config.js or some other expo config files?

@szilarddoro szilarddoro mentioned this issue Mar 2, 2023
Closed
@younes0 younes0 mentioned this issue Mar 7, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Issue accepted Platform: web Using Expo in the browser
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Simek @beepsoft @marcusradell @Kobusvdwalt @devYonz @gabrieldonadel @expo-bot