[webpack] Upgrade to Webpack 5

[EvanBacon]

Why

CRA (the base config) has just merged support for Webpack v5 (facebook/create-react-app#11201), meaning we can start upgrading.

• Resolve ENG-3881
• Fix Please upgrade @expo/webpack-config's webpack dependency to 5.x #2881
• Fix Error using Node 19 with expo-cli start --web  #4575

How

• Upgraded packages in expo/webpack-config and xdl to webpack v5.
• Upgraded plugins to use new syntax.
• Upgraded config and dev server schema.
• Removed unused features.

Prerequisites

I added a few features that should be split out and merged separately:

• Unified logging with Metro [webpack] Added unified logging #3766
• Update web beta warning [webpack] Added unified logging #3766
• Determine if we want to roll out Webpack 5 behind a feature flag / ship two versions of webpack to users. Not doing this, instead, npx expo enforces that the Webpack config must be installed locally, meaning users will opt-in manually.

Test Plan

• expo start -w
• expo start:web
  • Error overlay should show and work (currently doesn't, seems related to CRA) -- Pending V5 fix react error overlay build facebook/create-react-app#11799 Never merged.
  • Babel caching should work
  • Font loading and expo/vector-icons should work
  • Video and image loading / importing like metro (interop) Moved to Metro for web.
  • NCL should bundle
  • Debug logging should work
  • Auto resize observer adding
  • HTML loading
  • Eslint
  • TypeScript
  • AVIF support
  • Packages with CSS
• expo build:web
  • EXPO_WEB_DEBUG web debugging optimizations
  • WEB_HOST, WEB_PORT
  • No icons should warn
  • PWA Asset generation
  • PWA overrides

[kilbot]

Just curious if webpack5 is still on the timeline. I know there have been some changes recently and maybe @EvanBacon is looking at using Metro as a single bundler for native and web?

I am seeing some weirdness using SDK 46 and webpack4 devServer, ie:

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'mimeTypes'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

UPDATE:
The problem wasn't due to SDK 46, it was a resolution issue in my monorepo, I needed to pin webpack-dev-server to 3.11.0.

But this is still an issue. Expo is the only thing holding me back from using the new features of webpack5 elsewhere in my monorepo.

[matallui]

Is this still in the plans?

[joshuapare]

@EvanBacon I managed to fix the remaining items on this branch, with the only final issue being the instanceof check not passing in Webpack core when it's being passed the DevServer instance. Commenting out the check in Webpack core fixes the issue and linking the local build of the expo-cli, and I can run the expo app across all targets (I'm not sure why it doesn't pass, considering the constructor name and object shape are identical, and I can see the constructor in the passed object).

We would love to be able to get Module Federation working in Expo for the mobile builds (I got it working for the web build, but mobile builds are failing - I am digging). If there's anything I can do to help, please let me know - would love to see Webpack 5 (and specifically Module Federation) hit Expo!

[EvanBacon]

@sbhrule15 I'll be dropping the experimental native support in Webpack because I've been running into a lot of issues (mostly memory related) which I can't seem to track down.

Webpack support in Expo will be sunset later this year in favor of universal Metro (sometime after we add a number of critical features like bundle splitting). Repack should still be capable of running in Expo, iirc the team is also focused on module federation support.