search

remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
30.17k stars 2.56k forks source link

vite: module preload is not being handled properly #9037

Open lifeiscontent opened 8 months ago

lifeiscontent commented 8 months ago

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.

ianserlin commented 8 months ago

@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.

lifeiscontent commented 8 months ago

@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 commented 1 month ago

@brophdawg11 can we get some eyes on this? the remix vite plugin has been around for awhile now, and I'm still unsure if this is working, specifically when adding @vitejs/plugin-legacy to a remix + vite project.