Dev server serves untransformed raw svelte component instead of extracted CSS #171

buhrmi · 2022-01-04T18:53:41Z

I have tried upgrading by running bundle update vite_ruby.
I have read the [troubleshooting section] before opening an issue.

Description 📖

When the dev server is running, whenever I try to import a component that has a style tag, the browser tries to load the virtual CSS from the server, but the server responds with the "raw" svelte component file instead of only the extracted CSS, resulting in the error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

This does NOT happen if the dev server is not running.

Reproduction 🐞

It's easy to reproduce by following these steps:
https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e

Then remove emitCss: prod from the vite config. I've added it to the blog post because it circumvents the error for now.

Then create a component, eg. frontend/pages/welcome.svelte and a route in routes.rb: inertia 'welcome' => 'welcome'

Starting the dev server and visiting https://localhost:3000/welcome will yield the screenshotted error.

Vite Ruby Info

bin/vite present?: true vite_ruby: 3.0.7 vite_rails: 3.0.3 rails: 7.0.0 node: v16.11.0 npm: 8.0.0 yarn: 1.22.15 pnpm: ruby: ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux]

installed packages:
app@ /home/buhrmi/app
├─┬ @sveltejs/vite-plugin-svelte@1.0.0-next.33
│ └── vite@2.7.10 deduped
├─┬ vite-plugin-ruby@3.0.5
│ └── vite@2.7.10 deduped
└── vite@2.7.10

Screenshots 📷

The text was updated successfully, but these errors were encountered:

buhrmi · 2022-01-04T18:56:25Z

Maybe this is an issue with vite-plugin-svelte and not vite_ruby

ElMassimo · 2022-01-04T18:59:47Z

Hi Stefan @buhrmi, please provide a minimal repo (preferably using pnpm) with clear steps on how to reproduce the issue (expected vs actual behavior).

buhrmi · 2022-01-05T03:42:21Z

Hey Maximo, thanks so much for looking into this.

Here is a minimal Rails repo: https://github.com/buhrmi/vite_ruby_171

Below are the steps I took to arrive that repo

Steps to arrive at that exact repo

1. Generate new minimal vite/svelte rails app:

rails new app --skip-javascript --skip-asset-pipeline
cd app
bundle add vite_rails
bundle exec vite install
pnpm install -D svelte @sveltejs/vite-plugin-svelte
rails g controller welcome index

2. Update `vite.config.ts`:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
+ import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    RubyPlugin(),
+    svelte({
+     
+    })
  ],
})

3. Create a svelte component

/app/frontend/hello.svelte

<h1>Hello World</h1>

<style>
h1 {
  color: red;
}
</style>

4. Import that component in `/app/frontend/entrypoints/application.js`

// To see this message, follow the instructions for your Ruby framework.
//
// When using a plain API, perhaps it's better to generate an HTML entrypoint
// and link to the scripts and stylesheets, and let Vite transform it.
console.log('Vite ⚡️ Ruby')

// Example: Import a stylesheet in <sourceCodeDir>/index.css
// import '~/index.css'

+ import Hello from `~/hello.svelte`

5. Remove Stylesheet from Layout

/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

-    <%= stylesheet_link_tag "application" %>

    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

6. Run servers and see error

Now run rails s and ./bin/vite dev.

Navigating to http://localhost:3000/welcome/index will produce the error

ElMassimo · 2022-01-06T06:21:15Z

@StefSchenkelaars Thanks for providing the repo.

The problem seems to be related with Vite's root, which is frontend in this example. vite-plugin-svelte infers the root to be process.cwd(), which is true in most Vite setups but not here, where it causes this check to be always false which prevents CSS virtual modules from being served.

I've opened a pull request that fixes this issue by ensuring vite-plugin-svelte uses the resolved root value.

In the meantime, a workaround you could use is the following:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    RubyPlugin().map(plugin => ({ enforce: 'pre', ...plugin })),
    svelte(),
  ],
})

The order is important: vite-plugin-svelte uses enforce: 'pre', so vite-plugin-ruby must be placed before the svelte plugin in order to set the root before vite-plugin-svelte attempts to infer it.

buhrmi added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Jan 4, 2022

ElMassimo added bug: needs reproduction and removed bug: pending triage Something doesn't seem to be working, but hasn't been verified labels Jan 4, 2022

ElMassimo mentioned this issue Jan 6, 2022

fix: use the resolved vite root sveltejs/vite-plugin-svelte#247

Merged

ElMassimo closed this as completed Jan 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev server serves untransformed raw svelte component instead of extracted CSS #171

Dev server serves untransformed raw svelte component instead of extracted CSS #171

buhrmi commented Jan 4, 2022

buhrmi commented Jan 4, 2022

ElMassimo commented Jan 4, 2022 •

edited

Loading

buhrmi commented Jan 5, 2022

ElMassimo commented Jan 6, 2022 •

edited

Loading

Dev server serves untransformed raw svelte component instead of extracted CSS #171

Dev server serves untransformed raw svelte component instead of extracted CSS #171

Comments

buhrmi commented Jan 4, 2022

Description 📖

Reproduction 🐞

Screenshots 📷

buhrmi commented Jan 4, 2022

ElMassimo commented Jan 4, 2022 • edited Loading

buhrmi commented Jan 5, 2022

Steps to arrive at that exact repo

1. Generate new minimal vite/svelte rails app:

2. Update vite.config.ts:

3. Create a svelte component

4. Import that component in /app/frontend/entrypoints/application.js

5. Remove Stylesheet from Layout

6. Run servers and see error

ElMassimo commented Jan 6, 2022 • edited Loading

ElMassimo commented Jan 4, 2022 •

edited

Loading

2. Update `vite.config.ts`:

4. Import that component in `/app/frontend/entrypoints/application.js`

ElMassimo commented Jan 6, 2022 •

edited

Loading