ElMassimo / ElMassimo/vite_ruby

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

Open
#527 1 comment 0 reactions 0 assignees View on GitHub
bug: pending triage
Dominant language
Ruby
Stars
1.6k
Forks
149
Avg merge
5h 13m
Merged PRs (30d)
2

Description

[troubleshooting section]: https://vite-ruby.netlify.app/guide/troubleshooting.html

- [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. (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:

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._](https://github.com/socketopp/svelte-test-app)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.