[BUG] Polyfill doesn't handle Vite loading CSS files as JS #303
Description
Describe the bug
I'm trying to install a css-anchor-positiong polyfill into my application and open it in safari.
I have this line in my application.js
if (!("anchorName" in document.documentElement.style)) {
const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn');
polyfill({
elements: undefined,
excludeInlineStyles: false,
useAnimationFrame: false,
});
}This error occurs. Any advice on how to properly address it?
InvalidMimeType: Error loading http://localhost:3000/vite-dev/entrypoints/application.css: expected content-type "text/css", got "text/javascript".
(anonymous function) — fetch.ts:39
o — @oddbird_css-anchor-positioning_fn.js:23
vite.config.mjs
import { defineConfig } from 'vite'
import ViteRails from 'vite-plugin-rails'
import path from 'path' // Import 'path' for path resolution
const env = process.env.RAILS_ENV || 'development'
export default defineConfig({
plugins: [
ViteRails({
fullReload: {
additionalPaths: [
'config/routes.rb',
'app/views/**/*',
'app/controllers/**/*',
'app/models/**/*'
]
}
})
],
define: {
'process.env.RAILS_ENV': JSON.stringify(env)
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'app/javascript')
}
}
})Browsers tested on
Safari Version 18.3.1 (20620.2.4.11.6)