How can I polyfill Object.hasOwn using remix vite?

[c0per]

I'm using a dependency which uses Object.hasOwn.
I tried to polyfill it using @vite/plugin-legacy but I can't get it to work.
My vite.config.ts looks like this:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  base: process.env.CDN_URL,

  plugins: [
    remix({
      future: { v3_fetcherPersist: true, v3_relativeSplatPath: true, v3_throwAbortReason: true },
    }),
    tsconfigPaths(),
    legacy({
      polyfills: false,
      renderLegacyChunks: false,

      modernPolyfills: ['es/object/has-own'],
      renderModernChunks: true,
    }),
  ],
});

Since I don't need to support legacy browsers I turned off legacy chunk rendering. I tried using the legacy polyfill but that didn't help.

After searching the Internet, I can't seem to find any tutorials or documents on polyfilling with remix (vite). Please provide help🙏

[c0per]

I tried disabling legacy plugin, it seems to generate the exact same build. Maybe the problems is the legacy plugin don't know the entry file for a remix app?

[sergiodxa]

You could load any polyfill inside app/entry.client as that will run before any other JS

[c0per]

Yep I think this is the best solution for now. Just add import core-js in app/entry.client.

@vite/plugin-legacy doesn't seem to work, and there's a discussion for that.