remix icon indicating copy to clipboard operation
remix copied to clipboard

vite: module preload is not being handled properly

Open lifeiscontent opened this issue 1 year ago • 3 comments

Reproduction

per the docs: https://vitejs.dev/config/build-options#build-modulepreload

By default, a module preload polyfill is automatically injected. The polyfill is auto injected into the proxy module of each index.html entry. If the build is configured to use a non-HTML custom entry via build.rollupOptions.input, then it is necessary to manually import the polyfill in your custom entry:

import 'vite/modulepreload-polyfill'

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 11.95 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 122.0.2365.80
    Safari: 17.2.1

Used Package Manager

pnpm

Expected Behavior

when using vite + remix it automatically injects vite/modulepreload-polyfill into its dynamic inputs from rollupOptions

Actual Behavior

remix doesn't seem to be handling this scenario outlined in the docs, and from what I can tell in Sentry.io our app stability has gone down significantly since switching to vite across different browsers, possible due to this not being implemented.

lifeiscontent avatar Mar 12 '24 00:03 lifeiscontent

@lifeiscontent Not 100% sure, but this may be related to #8803 if you're describing behavior in development, and there may be fixes there that help you.

ianserlin avatar Mar 12 '24 06:03 ianserlin

@ianserlin yeah, that might be it, I'm actually not sure what exactly the fix should look like but the behaviors I'm seeing from upgrading to vite is as follows:

  1. when loading a page for the first time some times the loaders fail to run and in the app will show an error boundary (because I throw in the loader if anything goes wrong) so far, this issue only seems to show up in development
  2. older browsers like iOS Safari 15.2 don't seem to work anymore because things like Object.hasOwn aren't polyfilled, I've tried using the legacy plugin from vite, but it still doesn't seem to work with remix seems like this might be the culprit: https://github.com/remix-run/remix/discussions/8887

lifeiscontent avatar Mar 12 '24 16:03 lifeiscontent