The requested module 'vite' does not provide an export named 'defaultClientConditions'

[socketopp]

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

Description 📖

I was following these instructions to create a rails project with svelte using vite_rails. But when running bin/vite dev

failed to load config from /ruby/my_app/vite.config.ts
error when starting dev server:
file:/ruby/my_app/node_modules/@sveltejs/vite-plugin-svelte/src/utils/options.js:5
        defaultClientConditions,
        ^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: The requested module 'vite' does not provide an export named 'defaultClientConditions'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:475:24)
    at async loadConfigFromBundledFile (file:/ruby/my_app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66691:15)
    at async loadConfigFromFile (file:/ruby/my_app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66532:24)
    at async resolveConfig (file:/ruby/my_app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66140:24)
    at async _createServer (file:/ruby/my_app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:62758:18)
    at async CAC.<anonymous> (file:/ruby/my_app/node_modules/vite/dist/node/cli.js:735:20)
FAIL

Instructions:

Create a Rails Application
Run the following command to create a new Rails app:

rails new my_app --skip-javascript

The --skip-javascript flag is optional, but it avoids setting up the default Rails JavaScript configuration since you'll be using Vite.

Add the vite_rails Gem
Add the vite_rails gem to your Gemfile:

gem "vite_rails"

Then run:

bundle install

Install Vite
Run the Vite installer provided by the gem:

bin/vite install

Install Svelte
Install Svelte as a dependency using npm or Yarn:

yarn add svelte

Also, install the necessary Svelte integrations for Vite:

yarn add @sveltejs/vite-plugin-svelte

Configure Vite for Svelte
Update the vite.config.ts file to include the Svelte plugin. Your configuration might look like this:

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

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

Set Up Svelte Components
Create a Svelte folder for your components, typically under app/frontend. For example:

app/frontend/components/MyComponent.svelte

Add a Root Svelte Component
In your Rails view or layout file (e.g., app/views/layouts/application.html.erb), include the root element for your Svelte app:

<div id="svelte-app"></div>

Mount the Svelte App
Create an entry point file for your Svelte app (e.g., app/frontend/entrypoints/application.ts):

import App from "../components/MyComponent.svelte";

const app = new App({
  target: document.getElementById("svelte-app"),
});

export default app;

Start the Development Server
Start your Rails server:

bin/rails server

Start the Vite development server in another terminal:

bin/vite dev

Provide a clear and concise description of what the bug is.

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

Vite Ruby Info

Run bin/rake vite:info and provide the output:

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

Screenshots 📷

Provide console or browser screenshots of the problem.