Expo Webpack treats ".cjs" files as assets and not source files

[ajwootto]

Summary

If you attempt to use a Javascript file ending in ".cjs" in an expo webpack build, then it will fail to include that file in the source file compilation. Instead, it treats those files as "assets".

The same problem seems to exist in "create react app", so I guess maybe Expo is using the same webpack config under the hood: https://github.com/facebook/create-react-app/pull/12021

Currently you can work around the issue by overriding the expo webpack config using a similar workaround to what is described here: https://github.com/facebook/create-react-app/pull/12021#issuecomment-1108426483

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 12.6.6
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
      Watchman: 2023.03.13.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 2021.3 AI-213.7172.25.2113.9123335
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      @expo/webpack-config: ^18.0.1 => 18.1.2
      expo: ~48.0.18 => 48.0.20
      react: 18.2.0 => 18.2.0
      react-dom: 18.2.0 => 18.2.0
      react-native: 0.71.8 => 0.71.8
      react-native-web: ~0.18.10 => 0.18.12
    Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

web, chrome browser

Error output

No response

Reproducible demo or steps to reproduce from a blank project

Try to use any package that uses .cjs files in a newly generated expo project, after running npm run web and viewing the page on a browser you can see errors related to the file usage.

The specific package I was testing with was 'axios', simply trying to create a client:

import axios from 'axios'
// this will error claiming that axios does not exist
axios.create()

[geforcefan]

+1