elmassimo/vite_ruby

⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience

Vite Ruby

Vite is to frontend tooling as Ruby to programming, pure joy! 😍

This repo contains libraries that will allow you to easily integrate Vite in your favourite Ruby framework, such as Rails or Hanami.

Why Vite? 🤔

Vite does not bundle your code during development, which means the dev server is extremely fast to start, and your changes will be updated instantly.

In production, Vite bundles your code with tree-shaking, lazy-loading, and common chunk splitting out of the box, to achieve optimal loading performance.

It also provides great defaults, and is easier to configure than similar tools like webpack.

Features ⚡️

• 💡 Instant server start
• ⚡️ Blazing fast hot reload
• 🚀 Zero-config deployments
• 🤝 Integrated with assets:precompile
• And more!

Documentation 📖

Visit the documentation website to check out the guides and searchable configuration reference.

Installation 💿

Add this line to your application's Gemfile:

gem 'vite_rails' # vite_hanami for Hanami apps, vite_ruby for Rack apps

Then, run:

bundle install
bundle exec vite install

This will generate configuration files and a sample setup.

Additional installation instructions are available in the documentation website.

Getting Started 💻

Restart your web server, and then run bin/vite dev to start the Vite development server.

Visit any page and you should see a printed console output: Vite ⚡️ Ruby.

For more guides and a full configuration reference, check the documentation website.

Contact ✉️

Please use Issues to report bugs you find, and Discussions to make feature requests or get help.

Don't hesitate to ⭐️ star the project if you find it useful!

Using it in production? Always love to hear about it! 😃

Special Thanks 🙏

• webpacker
• vite

License

The gem is available as open source under the terms of the MIT License.

vite_ruby's Issues

Setting "0.0.0.0" for host configuration in config/vite.json is not working correctly

Description 📖

When specifying "0.0.0.0" as host in config/vite.json, HMR is not working correctly.
config/vite.json

{
  "all": {
    "sourceCodeDir": "app/frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "host": "0.0.0.0",
    "publicOutputDir": "vite_dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite_test",
    "port": 3037
  }
}

Running bin/vite dev, it shows:

vite v2.7.12 dev server running at:

  > Local:    http://localhost:3036/vite_dev/
  > Network:  http://192.168.0.4:3036/vite_dev/

  ready in 467ms.

Under Chrome console, it shows:

[vite] connecting...
client.ts:28 WebSocket connection to 'ws://0.0.0.0:3036/vite_dev/' failed: 
(anonymous) @ client.ts:28
client.ts:222 [vite] server connection lost. polling for restart...

Note that it uses "0.0.0.0" as the address but not the correct IP for the network 192.168.0.4

vite_javascript_tag inconsistent

Code:

<%= vite_javascript_tag 'application', "clients/#{client_name}" %>

Expected:

/vite-ruby/entrypoints/application.js
/vite-ruby/entrypoints/clients/github.js

Actual:

/vite-ruby/entrypoints/application.js
/vite-ruby/clients/github.js

This results in a 404 for the client file

Asset bundling can fail silently in tests

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

Description 📖

When running Rails feature specs that require asset precompilation, if asset compilation fails (which can happen but doesn't appear to produce any output in the test), vite_ruby will cause template errors in looking up the assets, but the guidance is misleading:

$ bundle exec rspec spec/features/some_spec.rb 

Randomized with seed 31883
Capybara starting Puma...
* Version 5.3.2 , codename: Sweetnighter
* Min threads: 0, max threads: 4
* Listening on http://127.0.0.1:44747
2021-10-11 12:11:33 -0700 Rack app ("GET /users/sign_in" - (127.0.0.1)): #<ActionView::Template::Error: Vite Ruby can't find entrypoints/application.ts in public/vite-test/manifest.json or public/vite-test/manifest-assets.json.

Possible causes:
  - The file path is incorrect.
  - The file is not in the entrypoints directory.
  - Some files are outside the sourceCodeDir, and have not been added to watchAdditionalPaths.

Visit the Troubleshooting guide for more information:
  https://vite-ruby.netlify.app/guide/troubleshooting.html#troubleshooting

In this case, everything was set up correctly, but we were simply running out of configured memory for node, so the asset build did not complete, and no manifest file was generated. See "Logs" section for details. Ideally, I think vite_ruby could inform the user that the asset build failed and show the underlying cause or give some troubleshooting information.

Reproduction 🐞

I'm not able to generate a minimal reproduction right now or share the project I'm working on. I hope the information above is still useful.

Vite Ruby Info

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

bin/vite present?: false
vite_ruby: 3.0.0
vite_rails: 3.0.0
rails: 
node: v14.16.0
npm: 7.12.1
yarn: 1.22.5
pnpm: 
ruby: ruby 2.7.3p183 (2021-04-05 revision 6847ee089d) [x86_64-linux]

installed packages:
[email protected] /home/maciek/duboce-labs/pganalyze
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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:

In this case, I think the output of invoking resolve_entries directly is more relevant: I've included that below.

Note that the warnings below "rendering chunks" are repeated a few times (the sourcemap warning is repeated a lot). I've omitted the duplicates for readability. I don't think the warnings relevant to this problem, but I'm including them just in case I'm misunderstanding this. (I do intend to investigate and address these but wanted to report this issue now.)

[7] pry(main)> ViteRuby.instance.manifest.resolve_entries('application', type: :typescript) 
Building with Vite ⚡️
vite v2.5.10 building for test...

transforming...

✓ 3004 modules transformed.

rendering chunks...

Error when using sourcemap for reporting an error: Can't resolve original location of error.
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
[BABEL] Note: The code generator has deoptimised the styling of /home/maciek/project/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
[plugin:inject] rollup-plugin-inject: failed to parse /home/maciek/project/app/javascript/styles/global/index.scss. Consider restricting the plugin to particular files via options.include
'unix' is not exported by 'node_modules/moment/dist/moment.js'
'duration' is not exported by 'node_modules/moment/dist/moment.js'

<--- Last few GCs --->

[665987:0x62ee0c0]   101065 ms: Mark-sweep (reduce) 2036.0 (2051.9) -> 2034.9 (2054.0) MB, 1709.3 / 0.1 ms  (average mu = 0.418, current mu = 0.035) allocation failure scavenge might not succeed
[665987:0x62ee0c0]   103846 ms: Mark-sweep (reduce) 2035.3 (2055.0) -> 2035.2 (2055.2) MB, 2412.5 / 0.1 ms  (average mu = 0.279, current mu = 0.132) allocation failure GC in old space requested


<--- JS stacktrace --->

FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [node]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [node]
 3: 0xb7978e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb79b07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd34395  [node]
 6: 0xd64f2e v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [node]
 7: 0xd70f66 v8::internal::FullEvacuator::RawEvacuatePage(v8::internal::MemoryChunk*, long*) [node]
 8: 0xd5d14f v8::internal::Evacuator::EvacuatePage(v8::internal::MemoryChunk*) [node]
 9: 0xd5d3c8 v8::internal::PageEvacuationTask::RunInParallel(v8::internal::ItemParallelJob::Task::Runner) [node]
10: 0xd4fca9 v8::internal::ItemParallelJob::Run() [node]
11: 0xd72ec0 void v8::internal::MarkCompactCollectorBase::CreateAndExecuteEvacuationTasks<v8::internal::FullEvacuator, v8::internal::MarkCompactCollector>(v8::internal::MarkCompactCollector*, v8::internal::ItemParallelJob*, v8::internal::MigrationObserver*, long) [node]
12: 0xd7375c v8::internal::MarkCompactCollector::EvacuatePagesInParallel() [node]
13: 0xd73925 v8::internal::MarkCompactCollector::Evacuate() [node]
14: 0xd85911 v8::internal::MarkCompactCollector::CollectGarbage() [node]
15: 0xd41c38 v8::internal::Heap::MarkCompact() [node]
16: 0xd43728 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
17: 0xd46b6c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
18: 0xd1524b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
19: 0x105b390 v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
20: 0x1401219  [node]

Build with Vite failed! ❌
ViteRuby::MissingEntrypointError: Vite Ruby can't find entrypoints/application.ts in public/vite-test/manifest.json or public/vite-test/manifest-assets.json.

Possible causes:
  - The file path is incorrect.
  - The file is not in the entrypoints directory.
  - Some files are outside the sourceCodeDir, and have not been added to watchAdditionalPaths.

Visit the Troubleshooting guide for more information:
  https://vite-ruby.netlify.app/guide/troubleshooting.html#troubleshooting




from /home/maciek/.rbenv/versions/2.7.3/lib/ruby/gems/2.7.0/gems/vite_ruby-3.0.0/lib/vite_ruby/manifest.rb:195:in `missing_entry_error'

We found this StackOverflow discussion, set the env var suggested there, and now the build completes.

Screenshots 📷

Provide console or browser screenshots of the problem.

N/A

HMR doesn't seems to work with vite_rails_legacy

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

Description 📖

Vite is performing a full page reload instead of HMR in an app using vite_rails_legacy

Reproduction 🐞

The app is using haml and the layout look like this:

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
    %title InsightsPlatform
    = stylesheet_link_tag    "insights_platform/application", media: "all"
    = javascript_include_tag "insights_platform/application"
    = vite_client_tag
    = vite_react_refresh_tag
    = vite_javascript_tag 'insights_platform'
    = csrf_meta_tags
    %meta{content: "width=device-width, initial-scale=1, maximum-scale=1", name: "viewport"}
    %link{href: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700", rel: "stylesheet", type: "text/css"}
    %link{href: "https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,500,600,700,800", rel: "stylesheet", type: "text/css"}

  %body
    = yield

:javascript
  function load (){
    var user = #{@current_user.to_insights_json}
    var assets = #{@assets.to_json}
    window.global.renderEntryPoint({ currentUser: user, assets: assets })
  }

  window.addEventListener('load', function () {
    load()
  }, false);

#root

Modifying any component renders this in the vite console:

6:39:31 PM [vite] page reload bundles/insights_platform/components/common/Sidebar.jsx

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 3.0.2
vite_rails_legacy: 3.0.1
rails: 4.2.11.1
node: v14.17.6
npm: 6.14.15
yarn: 1.22.5
pnpm:
ruby: ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin20]

installed packages:
[email protected] /Users/alejandroleonmunoz/projects/raynor
├── [email protected]
└── [email protected]

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:

❯ DEBUG=vite-plugin-ruby:* bin/vite dev
  vite-plugin-ruby:config {
  vite-plugin-ruby:config   base: '/vite-dev/',
  vite-plugin-ruby:config   build: {
  vite-plugin-ruby:config     emptyOutDir: true,
  vite-plugin-ruby:config     sourcemap: false,
  vite-plugin-ruby:config     assetsDir: 'assets',
  vite-plugin-ruby:config     manifest: true,
  vite-plugin-ruby:config     outDir: '../../public/vite-dev',
  vite-plugin-ruby:config     rollupOptions: { input: [Object], output: [Object] }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   root: '/Users/alejandroleonmunoz/projects/raynor/app/javascript',
  vite-plugin-ruby:config   server: {
  vite-plugin-ruby:config     host: 'localhost',
  vite-plugin-ruby:config     https: false,
  vite-plugin-ruby:config     port: 3036,
  vite-plugin-ruby:config     strictPort: true,
  vite-plugin-ruby:config     fs: { allow: [Array], strict: true },
  vite-plugin-ruby:config     hmr: { host: 'localhost', port: 3036 }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   entrypoints: {
  vite-plugin-ruby:config     'entrypoints/insights_platform.js': '/Users/alejandroleonmunoz/projects/raynor/app/javascript/entrypoints/insights_platform.js',
  vite-plugin-ruby:config     'entrypoints/insights_platform_loader.jsx': '/Users/alejandroleonmunoz/projects/raynor/app/javascript/entrypoints/insights_platform_loader.jsx'
  vite-plugin-ruby:config   }
  vite-plugin-ruby:config } +0ms
[dotenv][DEBUG] did not match key and value when parsing line 38:

config/vite.json file looks like this:

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": [
      "app/javascript/bundles/**/*",
      "app/javascript/bundles/insights_platform/**/*"
    ]
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

vite.config.json like this:

import { resolve } from "path";
import { defineConfig } from "vite";
import RubyPlugin from "vite-plugin-ruby";

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

  resolve: {
    alias: {
      jquery: "jquery/src/jquery",
      React: "react",
      ReactDOM: "react-dom",
      Shared: resolve(__dirname, "./app/javascript/bundles/shared"),
      "@Bundles": resolve(__dirname, "./app/javascript/bundles"),
    },
  },
});

Screenshots 📷

Thanks in advance!

Document how to remove sprockets (optional)

Edit: Im referring here exclusively to vite_rails gem.

Just found out about vite.js and it seems to fill the gap thats missing in all the new paradigm shift going on with rails 7, so I want to give it a shot with a project.

From what I have seen, vite seems to fully replace and the old assets pipeline powered by sprockets, however at the moment of running bundle exec vite install, the setup script leaves it coexisting with sprockets. While this may be a a safe and wise default to use, I think most of us would like to completely replace sprockets by vite.js, so some king of flag for the task, maybe like --rm-sprockets that would do all the required changes for freeing up a project from sprockets, while obviously leaving vite as the new default asset pipeline would be nice!

Another alternative would be doing it by hand, while its more cumberstone, I think just a quick guide in the docs would do it!

vite_legacy_javascript_tag execution order inconsistent with vite_javascript_tag

Description 📖

When using multiple endpoints on one page with vite_legacy_javascript_tag doesn't preserve execution order. I think this is because under the hood it just runs System.import(document.getElementById('#{ id }') behind the scenes which doesn't guarantee any execution order between vite_legacy_javascript_tag since they are handled async and will just run in completion order.

vite_javascript_tag does however behave as expected this is because <script type="module"> will execute the endpoints in the order that they are defined in the html.

I know that ideally we would only have 1 endpoint per page, but thats not a viable option for us since we have a lot of legacy code 😅

Reproduction 🐞

<head>
  <%= vite_javascript_tag "first_to_run" %>
  <%= vite_legacy_javascript_tag "first_to_run" %>
  <%= vite_javascript_tag "second_to_run" %>
  <%= vite_legacy_javascript_tag "second_to_run" %>
</head>

expected execution order: first_to_run, second_to_run
expected execution order for non-legacy browsers : first_to_run, second_to_run
expected execution order for legacy browsers : first_to_run, second_to_run or second_to_run, first_to_run

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

bin/vite present?: true
vite_ruby: 1.2.12
vite_rails_legacy: 2.0.12
rails: 4.2.11.1
node: v15.6.0
npm: 7.4.0
yarn: 1.22.4
bin/rake: No such file or directory - pnpm
pnpm: 
ruby: ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux]

installed packages:
rtings@ /home/sam/Workspace/rtings
├─┬ @vitejs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Appreciation

Other than this issue, this gem has been awesome! It's really gonna help us out! Thanks 😄 👍

Add paths in watchAdditionalPaths to configureServer

Description 📖

Add any paths in watchAdditionalPaths to server.watcher, which ensures Vite detects changes and performs HMR or reload as needed.

It's a nice-to-have, but useful for projects that import code outside the sourceCodeDir.

Assets aren't linking to vite dev server, which results in a Rails 404

Description 📖

When installing on vanilla Rails (6.1.1) and installing vite_rails as documented, any import statements get rewritten to the absolute path, but without hostname and port of the vite server. I've tried various options, but it always seems to use the absolute path to the file without rewriting correctly.

Background 📜

As described.

The Fix 🔨

No fix found thus far

Screenshots 📷

Entrypoint (rewritten):

JS console:

Assets manifest does not include some of the stylesheets when they have the same content

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

Description 📖

Some stylesheet entrypoints are not recognized while building

Reproduction 🐞

Given app/frontend/entrypoints/application.sass.scss and app/frontend/entrypoints/sample.sass.scss and app/frontend/entrypoints/sample2.sass.scss
When generating the assets before running tests (bundle exec rspec) via bin/vite clobber && bin/vite build --mode=test --force
Then the expected entrypoints are not generated (see screenshot) and thus it fails with the following when running tests

Failure/Error: = vite_stylesheet_tag 'sample.sass.scss' # tried with without extensions
Vite Ruby can't find entrypoints/sample.sass.scss in public/vite-test/manifest.json or public/vite-test/manifest-assets.json.

Vite Ruby Info

``` bin/vite present?: true vite_ruby: 3.0.8 vite_rails: 3.0.5 rails: 7.0.1 node: v12.22.5 ```

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

root@0e060fd43d0d:/app# bin/rake vite:info
bin/vite present?: true
vite_ruby: 3.0.8
vite_rails: 3.0.5
rails: 7.0.1
node: v12.22.5
yarn: 1.22.17
pnpm: 
ruby: ruby 3.1.0p0 (2021-12-25 revision fb4df44d16) [x86_64-linux]

installed packages:
app@ /app
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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:

Note: sample.sass.scss was not included in assets-manifest

Build with Vite complete: /app/public/vite
2022-02-01T10:43:58.100Z vite-plugin-ruby:config {
  base: '/vite/',
  build: {
    emptyOutDir: false,
    sourcemap: true,
    chunkSizeWarningLimit: '2048',
    assetsDir: 'assets',
    manifest: true,
    outDir: '../../public/vite',
    rollupOptions: { input: [Object], output: [Object] }
  },
  root: '/app/app/frontend',
  server: {
    host: 'localhost',
    https: false,
    port: 3036,
    strictPort: true,
    fs: { allow: [Array], strict: true }
  },
  entrypoints: {
    'entrypoints/application.js': '/app/app/frontend/entrypoints/application.js',
    'entrypoints/application.sass.scss': '/app/app/frontend/entrypoints/application.sass.scss',
    'entrypoints/login.sass.scss': '/app/app/frontend/entrypoints/login.sass.scss',
    'entrypoints/sample.sass.scss': '/app/app/frontend/entrypoints/sample.sass.scss',
    'entrypoints/sample2.sass.scss': '/app/app/frontend/entrypoints/sample2.sass.scss'
  }
}
2022-02-01T10:44:20.078Z vite-plugin-ruby:assets-manifest {
  manifest: Map {
    'entrypoints/application.sass.scss' => {
      file: 'assets/application.6802fa99.css',
      src: 'entrypoints/application.sass.scss'
    },
    'entrypoints/sample2.sass.scss' => {
      file: 'assets/sample.5423b091.css',
      src: 'entrypoints/sample2.sass.scss'
    }
  }
}

Screenshots 📷

Provide console or browser screenshots of the problem.

vite dev exits without any error message, explanation, or traceback

Description 📖

I was attempting to try out vite in a small rails application by following the Installation/Getting Started sections of the README. bundle exec vite install worked without issue. Without editing the generated config files at all, I ran bundle exec vite dev which quickly exited with exit code 1. The only output shown was the general vite command usage as shown below. The same behavior occurs with bin/vite dev and npx vite dev. While the failure itself is clearly problematic, the more immediate issue is that isn't any error logging nor any (documented) command line args to enable more verbosity or change the logging level.

I am willing to dive into the vite JS modules to do some debugging and hopefully figure out what is going wrong, but that is difficult to do since vite_ruby passes all commands through npx rather than just adding vite to my package.json (which would be my preference, to be honest) and installing them in my local node_modules.

It's a very bare bones repository thus far; essentially a fresh vanilla rails 6 install with a few common gems and node modules.

Reproduction 🐞

Not available

Vite Ruby Info

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

Is bin/vite present?: true
vite_ruby: 1.0.4
vite_rails: 2.0.2
rails: 6.0.3.4
node: v14.15.0
npm: 6.14.8
yarn: 1.22.10
ruby: ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin18]

vite-plugin-ruby:
[email protected] /Users/myname/projects/myrepo
`-- (empty)

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:

$ DEBUG=vite-plugin-ruby:* bin/vite dev
Commands:
  vite build          # Bundle all entrypoints using Vite.
  vite dev            # Start the Vite development server.
  vite install        # Performs the initial configuration setup to get started with Vite Ruby.
  vite version        # Print version
$ echo $?
1

The same output is received with DEBUG=* bin/vite dev

$ DEBUG=vite-plugin-ruby:* bin/vite build
I, [2021-03-02T11:37:14.241059 #63530]  INFO -- : Building with Vite ⚡️
^C#<Thread:0x00007f94681eb758 /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:287 run> terminated with exception (report_on_exception is true):
#<Thread:0x00007f94681eb230 /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:288 run> terminated with exception (report_on_exception is true):
Traceback (most recent call last):
	1: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:287:in `block (2 levels) in capture3'
/Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:287:in `read': IOError
Traceback (most recent call last):
	1: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:288:in `block (2 levels) in capture3'
/Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:288:in `read': IOError
Traceback (most recent call last):
	21: from bin/vite:29:in `<main>'
	20: from bin/vite:29:in `load'
	19: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/exe/vite:10:in `<top (required)>'
	18: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/dry-cli-0.6.0/lib/dry/cli.rb:67:in `call'
	17: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/dry-cli-0.6.0/lib/dry/cli.rb:114:in `perform_registry'
	16: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/cli/build.rb:16:in `call'
	15: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:12:in `build_from_task'
	14: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:141:in `with_node_env'
	13: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:13:in `block in build_from_task'
	12: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:149:in `ensure_log_goes_to_stdout'
	11: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:14:in `block (2 levels) in build_from_task'
	10: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/commands.rb:21:in `build'
	 9: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/builder.rb:15:in `build'
	 8: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/builder.rb:71:in `build_with_vite'
	 7: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/forwardable.rb:235:in `run'
	 6: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/runner.rb:11:in `run'
	 5: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/vite_ruby-1.0.4/lib/vite_ruby/runner.rb:30:in `execute_command'
	 4: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:281:in `capture3'
	 3: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:101:in `popen3'
	 2: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:219:in `popen_run'
	 1: from /Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:298:in `block in capture3'
/Users/myname/.rbenv/versions/2.7.1/lib/ruby/2.7.0/open3.rb:298:in `value': Interrupt

I cancelled the build command after it hung for 12 minutes.

Screenshots 📷

Can't reference style.css when using cssCodeSplit: false

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

Description 📖

When set cssCodeSplit: false, has error:

Vite Ruby can't find entrypoints/style.css in public/esm-bundle/manifest.json or public/esm-bundle/manifest-assets.json.

This appears to be caused by

vite_ruby/vite_ruby/lib/vite_ruby/manifest.rb

Line 161 in aba897e

name.include?('/') ? name : File.join(config.entrypoints_dir, name)

Reproduction 🐞

set vite.config.js cssCodeSplit: false, and add <%= vite_stylesheet_tag 'style.css' unless ViteRuby.instance.dev_server_running? %> to rails layout

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 3.0.2
vite_rails: 3.0.1
rails: 7.0.0.alpha2
node: v16.13.1
npm: 8.1.2
yarn: 3.1.1
pnpm: Usage Error: This project is configured to use yarn

$ pnpm ...
ruby: ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-darwin20]

installed packages:
@brickdoc/[email protected] /Users/ding/Projects/brickdoc
├─┬ @brickdoc/[email protected] -> ./packages/brickdoc-headless-design-system
│ ├─┬ [email protected] invalid: "^3.5.10" from packages/brickdoc-headless-design-system, "^3.5.10" from packages/brickdoc-design-system
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @brickdoc/[email protected] -> ./packages/brickdoc-design-system
│ └── [email protected] deduped
├─┬ @brickdoc/[email protected] -> ./packages/brickdoc-editor
│ └─┬ @brickdoc/[email protected] invalid: "workspace:packages/brickdoc-design-system" from packages/brickdoc-editor -> ./packages/brickdoc-design-system
│   └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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.

Failed to open TCP connection to localhost:3036

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

Description 📖

Hello, I've been trying to migrate a Rails app from webpacker to vite-rails, and while everything works with the bin/vite build command (or the automatic build when the dev server is not running) I cannot get Rails to connect correctly to the vite dev server. The error logs and other relevant logs are down below.

I unfortunately could not reproduce this error on a new project so it is likely to be an issue with something else on my app that's not letting Rails connect to the vite dev server for some reason. But other connections are working fine (like to webpack-dev-server or normal external API requests).

While this may not be an issue with vite_ruby/vite_rails itself, would anyone know what could possibly be going wrong with my setup? I have tried not running most extra middleware and most things from the initializers folders that's not default by Rails, also with no success.

Reproduction 🐞

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.11
vite_rails: 2.0.12
rails: 6.1.3.1
node: v14.16.1
npm: 6.14.12
yarn: 1.22.10
pnpm: 
ruby: ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-linux]

installed packages:
/home/***/projects/***
├── [email protected] 
└── [email protected] 

Logs 📜

Vite dev server itself seems to run just fine with seemingly nothing wrong on 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:

 vite-plugin-ruby:config {
  vite-plugin-ruby:config   base: '/vite-dev/',
  vite-plugin-ruby:config   build: {
  vite-plugin-ruby:config     emptyOutDir: true,
  vite-plugin-ruby:config     sourcemap: false,
  vite-plugin-ruby:config     assetsDir: 'assets',
  vite-plugin-ruby:config     manifest: true,
  vite-plugin-ruby:config     outDir: '../../../public/vite-dev',
  vite-plugin-ruby:config     rollupOptions: { input: [Object], output: [Object] }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   root: '/home/***/projects/***/app/javascript/entrypoints',
  vite-plugin-ruby:config   server: {
  vite-plugin-ruby:config     host: 'localhost',
  vite-plugin-ruby:config     https: false,
  vite-plugin-ruby:config     port: 3036,
  vite-plugin-ruby:config     strictPort: true,
  vite-plugin-ruby:config     fsServe: { root: '/home/***/projects/***' }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   entrypoints: {
  vite-plugin-ruby:config     App: '/home/***/projects/***/app/javascript/entrypoints/App.jsx',
  vite-plugin-ruby:config     Routes: '/home/***/projects/***/app/javascript/entrypoints/Routes.jsx',
  vite-plugin-ruby:config     application: '/home/***/projects/***/app/javascript/entrypoints/application.js',
  vite-plugin-ruby:config     wdyr: '/home/***/projects/***/app/javascript/entrypoints/wdyr.js',
  vite-plugin-ruby:config ...
  vite-plugin-ruby:config   }
  vite-plugin-ruby:config } +0ms

  vite v2.3.6 dev server running at:

  > Local: http://localhost:3036/vite-dev/
  > Network: use `--host` to expose

  ready in 352ms.

Rails error logs

2021-06-08 19:48:20 -0300: Rack app error handling request { GET /vite-dev/App.jsx }
#<Errno::ECONNREFUSED: Failed to open TCP connection to localhost:3036 (Connection refused - connect(2) for "::1" port 3036)>
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:949:in `rescue in block in connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:946:in `block in connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/timeout.rb:93:in `block in timeout'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/timeout.rb:103:in `timeout'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:945:in `connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:930:in `do_start'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:925:in `start'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:71:in `session'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:60:in `response'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:29:in `headers'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:120:in `perform_request'
/home/***/.ruby/gems/vite_ruby-1.2.11/lib/vite_ruby/dev_server_proxy.rb:21:in `perform_request'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:57:in `call'
/home/***/.ruby/gems/newrelic_rpm-7.0.0/lib/new_relic/agent/instrumentation/middleware_tracing.rb:101:in `call'
/home/***/.ruby/gems/railties-6.1.3.1/lib/rails/engine.rb:539:in `call'
/home/***/.ruby/gems/newrelic_rpm-7.0.0/lib/new_relic/agent/instrumentation/middleware_tracing.rb:101:in `call'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/configuration.rb:227:in `call'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:706:in `handle_request'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:476:in `process_client'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:334:in `block in run'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/thread_pool.rb:135:in `block in spawn_thread'
2021-06-08 19:48:20 -0300: Rack app error handling request { GET /vite-dev/@vite/client }
#<Errno::ECONNREFUSED: Failed to open TCP connection to localhost:3036 (Connection refused - connect(2) for "::1" port 3036)>
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:949:in `rescue in block in connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:946:in `block in connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/timeout.rb:93:in `block in timeout'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/timeout.rb:103:in `timeout'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:945:in `connect'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:930:in `do_start'
/home/***/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http.rb:925:in `start'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:71:in `session'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:60:in `response'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:29:in `headers'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:120:in `perform_request'
/home/***/.ruby/gems/vite_ruby-1.2.11/lib/vite_ruby/dev_server_proxy.rb:21:in `perform_request'
/home/***/.ruby/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:57:in `call'
/home/***/.ruby/gems/newrelic_rpm-7.0.0/lib/new_relic/agent/instrumentation/middleware_tracing.rb:101:in `call'
/home/***/.ruby/gems/railties-6.1.3.1/lib/rails/engine.rb:539:in `call'
/home/***/.ruby/gems/newrelic_rpm-7.0.0/lib/new_relic/agent/instrumentation/middleware_tracing.rb:101:in `call'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/configuration.rb:227:in `call'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:706:in `handle_request'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:476:in `process_client'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/server.rb:334:in `block in run'
/home/***/.ruby/gems/puma-3.12.6/lib/puma/thread_pool.rb:135:in `block in spawn_thread'

vite.config.ts and vite.json

import { resolve } from 'path'
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [RubyPlugin()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'app/javascript/entrypoints'),
      '@assets': resolve(__dirname, 'app/assets')
    }
  }
})

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "publicOutputDir": "vite-dev",
    "port": 3036,
    "autoBuild": true, // I have also tried using not using autoBuild
    "devServerConnectTimeout": 3 // I have tried a lot of different timeouts, and using the default one, with no success 
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test"
  }
}

Screenshots 📷

Provide console or browser screenshots of the problem.

• Auto-build with vite server not running works fine
  

base path URL is not configurable

Is your feature request related to a problem? Please describe.
I have a RoR app running on https://example.com/my-app
When I compile the assets for production, URLs used in my CSS are incorrect: expected /my-app/vite/assets/foo.png, got /vite/assets/foo.png. this issue is normal since my vite configuration is incomplete.

According to the vite documentation, the public base path is the solution. Let's tweak the configuration:

import { defineConfig } from "vite";
import RubyPlugin from "vite-plugin-ruby";

export default defineConfig({
  plugins: [RubyPlugin()],
  base: '/my-app/vite'
});

RAILS_ENV=production bundle exec vite build --force --debug | grep 'my-app'
# no matching lines

It looks likeRubyPlugin() overwrites my custom configuration. Let's find another way.

I read through the vite-ruby doc and found the assetHost property:

{
  "all": {
    "sourceCodeDir": "app/assets",
    "watchAdditionalPaths": [],
    "assetHost": "/my-app"
  }
}

RAILS_ENV=production bundle exec vite build --force --debug | grep 'my-app'
base: '///my-app/vite/',
assetHost: '/my-app',
base: '///my-app/vite/',
BASE_URL: '///my-app/vite/',

We're getting close to what I would expect. However, the two leading slashes annoy me. After some research in your code the slashes are added in config.ts:103

Describe the solution you'd like

• Be able to change the base property
  Or
• remove the 2 leading slashes. Developers still have the choice to add them manually if they want to.

{
 "all": {
   "sourceCodeDir": "app/assets",
   "watchAdditionalPaths": [],
   "assetHost": "/my-app",                                           // or 
   "assetHost": "//my-app",      ,                                   // or
   "assetHost": "https://example.com/my-app"    
 }
}

A preload for 'http://localhost:4000/vite-dev/application.js' is found, but is not used because the script type does not match.

Description 📖

Visit page, chrome show warnings and i found application.js requsted twice.

Reproduction 🐞

Created by https://github.com/ElMassimo/jumpstart-vite

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.2
vite_rails: 2.0.8
rails: 6.1.3.1
node: v15.4.0
npm: 7.0.15
yarn: 1.22.5
pnpm:
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin18]

Screenshots 📷

vite-ruby breaks tailwindcss jit mode

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

Description 📖

vite-ruby dev server seems to be not compatible with tailwindcss jit mode. Adding new classes that should trigger new CSS to be emitted does not do that, resulting in unstyled elements until dev server is restarted. It works fine when building on reload without dev server running.

Reproduction 🐞

https://github.com/grk/rails-vite-tailwind-repro - instructions in readme

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.20
vite_rails: 2.0.13
rails: 6.1.4
node: v16.1.0
npm: 7.11.2
yarn: 1.22.10
pnpm:
ruby: ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [arm64-darwin20]

installed packages:
rails-vite-tailwind-repro@ /Users/grk/code/tmp/rails-vite-tailwind-repro
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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.

Test environment is using development build

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

Description 📖

I'm precompiling assets to run RSpec integration tests with YARN_PRODUCTION=false RAILS_ENV=test bin/rails assets:precompile, but running the app in test env or running RSpec gives me this console error:

Uncaught TypeError: v.exports.jsxDEV is not a function in my entrypoint. I'm using Vite together with Typescript and React.

development and production envs are running fine.

Reproduction 🐞

I'll prepare a repository tomorrow morning 🙏🏻

Vite Ruby Info

bin/vite present?: true
vite_ruby: 3.0.0
vite_rails: 3.0.0
rails: 6.1.4.1
node: v14.17.1
npm: 6.14.13
yarn: 1.17.3
pnpm: 
ruby: ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x86_64-darwin20]

installed packages:
docket-web@ /Users/peter_goebel/Sites/Workspace/DEBD/DEBD/docket-web
├── [email protected] 
└── [email protected] 

Screenshots 📷

Custom build command

Hi, on one of my low memory vps building with vite throws Allocation failed - JavaScript heap out of memory error, to fix it I need to add NODE_OPTIONS=--max-old-space-size=4000 and run it before rails assets:precompile.

Are there option to customize build command on assets:precompile with properties like NODE_OPTIONS= >

`t` parameter in url

hey @ElMassimo !

here the engine checks for t= parameter and seems like it interrupts all requests with such parameter

for example localhost:3000/whatever?t=1 - it tries to handle such link, even if whatever resource is defined in the routes

prob some additional conditions should be added while looking for the param or it's the key part of the mechanics?
thanks!

Skipping vite build. Fails on Rails 7 with Capistrano 3

Using:

• vite_rails: 3.0.5
• rails: 7.0.1
• capistrano: 3.19.0

After deploying when making changes to assets, it works fine. But when deploying without making any changes to the assets then during rake assets:precompile, what happens is Skipping vite build. Watched files have not changed since the last build. But after that the assets are not linked properly and the rails app crash: ActionView::Template::Error (Vite Ruby can't find entrypoints/application.js in public/vite/manifest.json or public/vite/manifest-assets.json.

How to inline SVG assets? [question]

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

Description 📖

This isn't a bug but rather a question. I'm currently trying to switch from Webpacker to Vite Ruby and things have been okay so far, except this one point of contention.

Currently, I'm using webpacker to house all my SVG assets. Some of which are included in my source bundle myself and others which I'm importing from NPM.

I import all my assets into a file called icons.ts:

import '@mdi/svg/svg/account-group-outline.svg';
import '@mdi/svg/svg/account-outline.svg';
import '@mdi/svg/svg/arrow-left.svg';
import '@mdi/svg/svg/arrow-right.svg';
import '@mdi/svg/svg/bank-outline.svg';
import '@mdi/svg/svg/calendar-blank-outline.svg';
import '@mdi/svg/svg/close.svg';
import '@mdi/svg/svg/cog-outline.svg';
import '@mdi/svg/svg/image-multiple-outline.svg';
import '@mdi/svg/svg/menu.svg';
import '@mdi/svg/svg/office-building-outline.svg';
import '@mdi/svg/svg/plus.svg';
import '@mdi/svg/svg/post-outline.svg';
import '@mdi/svg/svg/swap-horizontal.svg';
import '@mdi/svg/svg/table.svg';
import 'boxicons/svg/regular/bx-table.svg';
import 'boxicons/svg/regular/bx-transfer-alt.svg';

// when using vite
// const assets = import.meta.globEager('./assets/**/*.svg');

// when using webpacker
const assets = require.context('../assets', true, /.svg/);
assets.keys().forEach(assets);

and I'm able to inline the SVGs in my rails views using the inline_svg gem which depends on Webpacker internally, so is incompatible with Vite.

So I was trying to think of another way to achieve the same result without having to have two bundlers lying around, and I thought of possibly following along with this guide – https://thoughtbot.com/blog/organized-workflow-for-svg
and calling File.open and somehow referencing the asset using the vite_asset_path helper but I don't even think this is possible nor desirable.

So is there any way to go about this while working within Vite?

support .scss entrypoint

Is your feature request related to a problem? Please describe.

Add typography.scss to page: <%= vite_stylesheet_tag 'typography', media: 'print' %>

app/frontend: sourceCodeDir
  ├── entrypoints: entrypointsDir
  │   # only Vite entry files here
  │   └── application.js
  │   └── typography.scss
  └── components:
  │   └── App.vue
  └── channels:
  │   │── index.js
  │   └── chat.js
  └── stylesheets:
  │   └── my_styles.css
  └── images:
      └── logo.svg

Bug: "alias" option is deprecated. Use "resolve.alias" instead.

Description 📖

On a new project, after going through setup steps on a new rails project, attempt to run bundle exec vite build and receive the following error:

bundle exec vite build
I, [2021-02-16T20:35:08.134871 #67630]  INFO -- : Building with Vite ⚡️
E, [2021-02-16T20:35:08.846910 #67630] ERROR -- : Build with Vite failed:
building for production...
✓ 0 modules transformed.

(!) "alias" option is deprecated. Use "resolve.alias" instead.
You must supply options.input to rollup
error during build:
Error: You must supply options.input to rollup
    at Graph.generateModuleGraph (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19184:19)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Graph.build (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19148:9)
    at async rollupInternal (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:20053:9)
    at async doBuild (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/dist/node/chunks/dep-9bcbff8e.js:46359:24)
    at async build (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/dist/node/chunks/dep-9bcbff8e.js:46305:16)
    at async CAC.<anonymous> (/Users/konnorrogers/projects/personal/carebnb/node_modules/vite/dist/node/cli.js:13985:9)

EDIT: After some digging im assuming this is most likely the culprit:

vite_ruby/vite-plugin-ruby/src/index.ts

Line 58 in 1d859e3

alias, // Fallback just in case someone is using < beta.68

"can't detect preamble" error with React plugin

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

Description 📖

Hello! I'm playing with Vite Rails, trying to create a Vite Rails + React demo app. The problem is that I'm getting the following error:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

The error is reported in the readme of VIte Rails plugin, suggesting that:

In middleware mode, you should make sure your entry index.html file is transformed by Vite

But frankly I know nothing about Vite so my debugging stopped here :D

Reproduction 🐞

1. Clone the folowing repository: https://github.com/mdesantis/rails-7-demo-vite
2. bin/setup
3. foreman start -f Procfile.dev
4. visit http://localhost:5100/hello_react

Vite Ruby Info

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

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

installed packages:
rails-7-demo-vite@ /home/maurizio/Sviluppo/rails-7/rails-7-demo-vite
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Screenshots 📷

Dev server serves untransformed raw svelte component instead of extracted CSS

• 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/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Screenshots 📷

Syntax Error uncommenting a vite_rails template line

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

Description 📖

The suggested code import.meta.globEager('./**/*_channel.js') raises the following syntax error:

Uncaught SyntaxError: unexpected token: ':'

I don't think Vite supports using import.meta.globEager without saving it in a variable, as the code above produces (with an asd_channel.js inside the entrypoints folder):

{ "./asd_channel.js": __glob_0_0,}

which is a syntax error without a variable declaration (i.e. const something = ) before.

Changing the code to something like const _ = import.meta.globEager('./**/*_channel.js') makes it work.

Reproduction 🐞

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

I will if needed, but the error happens just uncommenting the line after installing vite_rails, so the repo may be useless.

Vite Ruby Info

bin/vite present?: true
vite_ruby: 3.0.3
vite_rails: 3.0.1
rails: 7.0.0.rc1
node: v14.17.5
npm: 8.0.0
yarn: 1.22.15
pnpm: 
ruby: ruby 3.0.3p157 (2021-11-24 revision 3fb7d2cadc) [x86_64-linux]

installed packages:
rails-7-demo-vite-2@ /home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Output

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

> DEBUG=vite-plugin-ruby:* bin/vite build
Building with Vite ⚡️
vite v2.7.1 building for production...
transforming...
✓ 2 modules transformed.
Unexpected token
file: /home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/app/frontend/entrypoints/application.js:24:42
22: //
23: // // Import all channels.
24: import.meta.globEager('./**/*_channel.js')
                                              ^
25: //
26: // Turbolinks.start()
error during build:
Error: Unexpected token
    at error (/home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (/home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/node_modules/rollup/dist/shared/rollup.js:12354:16)
    at Module.tryParse (/home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/node_modules/rollup/dist/shared/rollup.js:12757:25)
    at Module.setSource (/home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/node_modules/rollup/dist/shared/rollup.js:12660:24)
    at ModuleLoader.addModuleSource (/home/maurizio/Sviluppo/rails-7/rails-7-demo-vite-2/node_modules/rollup/dist/shared/rollup.js:22138:20)

Build with Vite failed! ❌

Screenshots 📷

Assets not minifying for production

• I have read the troubleshooting section before opening an issue.

Description 📖

First off, thanks for putting this project together. It's such an improvement on webpacker regarding its ease of use and configuration.

I'm deploying a dockerized rails app to heroku and followed the instructions in the docs site for a heroku deploy. I also confirmed that the vite:build command is running when the assets:precompile command runs.

I feel like there is something simple that I'm missing, but when I look at the source code for my deployed app, all of the js not minified and the tree structure is in tact (screenshot comparison below between the sample deployed app on the docs site and my deployed app).

Reproduction 🐞

https://github.com/damwhit/harvest_helper/tree/vite-vue

Screenshots 📷

Thanks for your help!

Skipping build. Vite assets are already up-to-date (causes vite not to connect)

bin/rake vite:info
Running via Spring preloader in process 70795
Is bin/vite present?: true
vite_ruby: 1.0.4
vite_rails: 2.0.2
rails: 6.1.3
node: v14.5.0
npm: 6.14.11
yarn: 1.22.4
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19]

vite-plugin-ruby:
[email protected] /Users/cj/Documents/apps/SnapNHD/snap
└── [email protected]

When I receive the following:

RuntimeError - conflicting chdir during another chdir block:
  app/views/layouts/application.html.erb:13
  app/controllers/auth_controller.rb:10:in `block (2 levels) in <class:AuthController>'

Skipping build. Vite assets are already up-to-date ⚡️
Skipping build. Vite assets are already up-to-date ⚡️

It does not output the following in the console and vite's auto-refresh does not work:

[vite] connecting...
2DevTools failed to load SourceMap: Could not load content for http://localhost:3000/vite-dev/@fs/Users/cj/Documents/apps/SnapNHD/snap/node_modules/.vite/chunk.IXVMP6XR.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

p.s. I am also getting a 404 error randomly.

Let me know if I can provide any more information.

Cheers!

vite_rails: lock down vite_ruby dependency using bounded requirements (Eg ~>)

Description 📖

First, thank you for creating vite_ruby and vite_rails! 😸

Right now vite_rails gem has an open ended dependency on vite_ruby (>= 0):

https://github.com/ElMassimo/vite_ruby/blob/main/vite_rails/vite_rails.gemspec#L23

This could introduce issues for installations in the future when a new version of vite_ruby is released that is incompatible with vite_rails 2, for example.

Ideally, these dependencies (including railties) should avoid have open-ended definitions (see Logs)

Logs 📜

Output

When building the gem:

$ cd vite_ruby/vite_rails

$ gem build vite_rails.gemspec
WARNING:  open-ended dependency on railties (>= 5.1) is not recommended
  if railties is semantically versioned, use:
    add_runtime_dependency 'railties', '~> 5.1'
WARNING:  open-ended dependency on vite_ruby (>= 0) is not recommended
  use a bounded requirement, such as '~> x.y'
WARNING:  open-ended dependency on bundler (>= 1.3.0, development) is not recommended
  if bundler is semantically versioned, use:
    add_development_dependency 'bundler', '~> 1.3', '>= 1.3.0'
WARNING:  open-ended dependency on rubocop (>= 0, development) is not recommended
  use a bounded requirement, such as '~> x.y'
WARNING:  open-ended dependency on rubocop-minitest (>= 0, development) is not recommended
  use a bounded requirement, such as '~> x.y'
WARNING:  open-ended dependency on rubocop-performance (>= 0, development) is not recommended
  use a bounded requirement, such as '~> x.y'
WARNING:  See https://guides.rubygems.org/specification-reference/ for help
  Successfully built RubyGem
  Name: vite_rails
  Version: 2.0.2
  File: vite_rails-2.0.2.gem

Let me know if this is OK with you and I can send over a PR.

Once again, thank you for releasing these gems! ❤️ ❤️ ❤️

Cheers.

bin/vite binstub does not work as expected (was not generated by Bundler)

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

Description 📖

While installing vite_rails, a new binstub is added to my app's bin/ directory. When I try to run bin/vite, I get the following error (from bin/vite script itself):

Your bin/bundle was not generated by Bundler, so this binstub cannot run.
Replace bin/bundle by running bundle binstubs bundler --force, then run this command again.

Reproduction 🐞

I ran bundle binstubs bundler --force, which replaced all of my existing binstubs with binstubs that make rails app throw errors on startup (it is no longer possible to start the rails server). Aside from that, this command also made it permanent so that on every bundle install all of the binstubs are being regenerated. Also, there are way too many unnecessary binstubs being generated. Almost one binstub for every gem in my Gemfile. This is not desirable behavior and should not be a recommended solution.

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.9
vite_rails: 2.0.10
rails: 5.2.4.3
node: v14.16.1
npm: 6.14.12
yarn: 1.22.10
pnpm: 5.17.3
ruby: ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-darwin19]

installed packages:
/Users/viktor/Developer/Ruby/CivicLift
├── [email protected]
└── [email protected]

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:

> DEBUG=vite-plugin-ruby:* bin/vite dev
Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.

> DEBUG=vite-plugin-ruby:* bin/vite build
Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.

# after changing `bin/bundler` to be compatible with `bin/vite`:
 > DEBUG=vite-plugin-ruby:* bin/vite dev

  vite-plugin-ruby:config {
  vite-plugin-ruby:config   base: '/vite-dev/',
  vite-plugin-ruby:config   build: {
  vite-plugin-ruby:config     emptyOutDir: true,
  vite-plugin-ruby:config     sourcemap: false,
  vite-plugin-ruby:config     assetsDir: 'assets',
  vite-plugin-ruby:config     manifest: true,
  vite-plugin-ruby:config     outDir: '../../../public/vite-dev',
  vite-plugin-ruby:config     rollupOptions: { input: [Object], output: [Object] }
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   root: '/Users/viktor/Developer/Ruby/CivicLift/app/javascript/entrypoints',
  vite-plugin-ruby:config   server: { host: 'localhost', https: false, port: 3036, strictPort: true },
  vite-plugin-ruby:config   entrypoints: {
  vite-plugin-ruby:config     index: '/Users/viktor/Developer/Ruby/CivicLift/app/javascript/entrypoints/index.tsx'
  vite-plugin-ruby:config   }
  vite-plugin-ruby:config } +0ms


> DEBUG=vite-plugin-ruby:* bin/vite build
Building with Vite ⚡️
vite v2.2.4 building for production...
transforming...
✓ 1340 modules transformed.
2021-05-07T12:32:04.389Z vite-plugin-ruby:config {
  base: '/vite/',
  build: {
    emptyOutDir: true,
    sourcemap: true,
    assetsDir: 'assets',
    manifest: true,
    outDir: '../../../public/vite',
    rollupOptions: { input: [Object], output: [Object] }
  },
  root: '/Users/viktor/Developer/Ruby/CivicLift/app/javascript/entrypoints',
  server: { host: 'localhost', https: false, port: 3036, strictPort: true },
  entrypoints: {
    index: '/Users/viktor/Developer/Ruby/CivicLift/app/javascript/entrypoints/index.tsx'
  }
}
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
[vite:css] expected ")".
   ╷
48 │       calc(50% - #{$wallHeaderArrow-mobile-width}}) 0,
   │                                                  ^
   ╵
  app/javascript/scss/_public-wall.scss 48:50  @import
  app/javascript/scss/index.scss 37:9          root stylesheet
file: /Users/viktor/Developer/Ruby/CivicLift/app/javascript/scss/index.scss
Error: expected ")".
   ╷
48 │       calc(50% - #{$wallHeaderArrow-mobile-width}}) 0,
   │                                                  ^
   ╵
  app/javascript/scss/_public-wall.scss 48:50  @import
  app/javascript/scss/index.scss 37:9          root stylesheet
error during build:
Error: expected ")".
   ╷
48 │       calc(50% - #{$wallHeaderArrow-mobile-width}}) 0,
   │                                                  ^
   ╵
  app/javascript/scss/_public-wall.scss 48:50  @import
  app/javascript/scss/index.scss 37:9          root stylesheet
    at Object._newRenderError (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:13172:19)
    at Object._wrapException (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:12998:16)
    at _render_closure1.call$2 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:81115:21)
    at _RootZone.runBinary$3$3 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:27260:18)
    at _FutureListener.handleError$1 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:25816:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:26114:49)
    at Object._Future__propagateToListeners (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:4536:77)
    at _Future._completeError$2 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:25946:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:25600:12)
    at Object._asyncRethrow (/Users/viktor/Developer/Ruby/CivicLift/node_modules/sass/sass.dart.js:4335:17)

Build with Vite failed! ❌

Extra forward slash when publicOutputDir setting is blank

Description 📖

When publicOutputDir setting is blank, the resulting URLs have extra forward slash (//) and browser interpretes that as absolute path which is invalid.

Reproduction 🐞

Use the following config/vite.json

{
  "all": {
    "assetsDir": "assets",
    "publicDir": "public",
    "publicOutputDir": "",
    "sourceCodeDir": "app/frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "port": 3037
  }
}

I did not test setting blank values for assetsDir and publicDir; but I think that they would have the same problem

Legacy plugin not compatible with vite 2.7.x

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

Description 📖

In vite 2.7, the name of the legacy-polyfills entry has changed from "../../vite/legacy-polyfills" to "../../\u0000vite/legacy-polyfills". This filename has changed since this polyfill is a so called virtual file (as explained in the plugin api docs).

This however makes the ruby code crash since it can't resolve the filename (see stacktrace below).

This change is also discussed in vitejs/vite#6097 but as I dove into it I found that this NULL character is not a typo but a feature. So therefore I think the gem should be change to handle this correctly.

If this could be confirmed as a bug, I could work out a solution.

Reproduction 🐞

• Repo with vite > 2.7 and the legacy plugin
• Render a page with a vite_legacy_javascript_tag or vite_legacy_typescript_tag tag

Logs 📜

ActionView::Template::Error (path name contains null byte):
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:176:in `extname'
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:176:in `with_file_extension'
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:150:in `resolve_entry_name'
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:83:in `lookup'
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:70:in `lookup!'
vite_ruby (3.0.3) lib/vite_ruby/manifest.rb:22:in `path_for'
vite_rails (3.0.2) lib/vite_rails/tag_helpers.rb:22:in `vite_asset_path'
vite_plugin_legacy (3.0.0) lib/vite_plugin_legacy/tag_helpers.rb:30:in `vite_legacy_polyfill_tag'
vite_plugin_legacy (3.0.0) lib/vite_plugin_legacy/tag_helpers.rb:15:in `vite_legacy_javascript_tag'
vite_plugin_legacy (3.0.0) lib/vite_plugin_legacy/tag_helpers.rb:20:in `vite_legacy_typescript_tag'

My app => app/views/layouts/login.html.haml:31

Screenshots 📷

Provide console or browser screenshots of the problem.

Keep assets from previous builds by default

Reasoning: during "traditional" capistrano-like deployments the 'public/vite' folder is kept between deployments. It is expected to serve old assets for a "little time" between deployments, or for long running clients, that still request old assets.

The docs write about a separate clobber + clean task, so my expectation was, that Vite-Ruby does not delete assets on normal build. But I found out when trying to deploy a new app with Vite, vite:build etc. will delete previous asset versions every time from the 'public/vite/assets', because the option is set by the plugin:

vite_ruby/vite-plugin-ruby/src/index.ts

Line 42 in 91d2ea4

emptyOutDir: true,

This will lead to missing 404 assets during deployment, and is unexpected, as the "normal" rails asset pipeline + webpacker only add new additional assets and a availability of clean/clobber task implies a non-deleting build IMO.

So my suggestion:

1. Set emptyOutDir to false when in production (like the line below
2. Or under Deployment in docs tell about this option

Workaround:

export default defineConfig({ 
  ...
  build: {
    emptyOutDir: false
  }

Versions

    "vite": "^2.7.12",
    "vite-plugin-ruby": "^3.0.7",

DevProxy does not correctly rewrite url for *.min.css files

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

Description 📖

At this moment ViteRuby::DevServerProxy tries to rewrite url for *.min.css files and then actually seeking them as *.min files on vite server.
I've tuned the regex to fix this problem.

Add support for Subresource Integrity

Is your feature request related to a problem? Please describe.

Similar to rails/webpacker#323

Sprockets supported subresource integrity out of the box. It would be nice if

vite_javascript_tag 'application', integrity: true

worked the same.

Describe the solution you'd like
Calculate the hash for each file and add it to the relevant tags

Describe alternatives you've considered
None.

Additional context

• webpacker does not support it at the moment. This could be a nice differentiator. See rails/webpacker#323
• Github about SRI: https://github.blog/2015-09-19-subresource-integrity/

vite_ruby missing css file from manifest when build.cssCodeSplit is false

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

Description 📖

with the following vite.config.ts im running into an issue where the single css file output from rollup isn't making its way into the manifest.json file

export default defineConfig({
  build: {
    cssCodeSplit: false,
  },
  plugins: [reactRefresh(), RubyPlugin()],
  resolve: {
    alias: {
      src: resolve(__dirname, 'src'),
    },
  },
});

when build.cssCodeSplit is true, the css files are correctly output to the generated manifest file

{
  "classic_taos_interop.tsx": {
    "file": "/vite/assets/classic_taos_interop.caa092eb.js",
    "src": "classic_taos_interop.tsx",
    "isEntry": true,
    "imports": [
      {
        "file": "/vite/assets/vendor.a1716101.js"
      },
      {
        "file": "/vite/assets/duo_mfa.51620be2.js",
        "imports": [
          {
            "file": "/vite/assets/vendor.a1716101.js"
          }
        ],
        "css": [
          "/vite/assets/duo_mfa.f69369a9.css"
        ],
        "assets": [
          "assets/close.6dbfea5e.svg"
        ]
      }
    ]
  },
  "main.tsx": {
    "file": "/vite/assets/main.b0644003.js",
    "src": "main.tsx",
    "isEntry": true,
    "imports": [
      {
        "file": "/vite/assets/vendor.a1716101.js"
      },
      {
        "file": "/vite/assets/duo_mfa.51620be2.js",
        "imports": [
          {
            "file": "/vite/assets/vendor.a1716101.js"
          }
        ],
        "css": [
          "/vite/assets/duo_mfa.f69369a9.css"
        ],
        "assets": [
          "assets/close.6dbfea5e.svg"
        ]
      }
    ],
    "css": [
      "/vite/assets/main.d32c6a89.css"
    ],
    "assets": [
      "assets/taos.e8de4759.jpg"
    ]
  },
  "_vendor.a1716101.js": {
    "file": "/vite/assets/vendor.a1716101.js"
  },
  "_duo_mfa.51620be2.js": {
    "file": "/vite/assets/duo_mfa.51620be2.js",
    "imports": [
      {
        "file": "/vite/assets/vendor.a1716101.js"
      }
    ],
    "css": [
      "/vite/assets/duo_mfa.f69369a9.css"
    ],
    "assets": [
      "assets/close.6dbfea5e.svg"
    ]
  }
}

when build.cssCodeSplit is false, the terminal output shows the styles.css file being created, but it is not anywhere in the manifest

rendering chunks...
../../public/vite/assets/close.6dbfea5e.svg                 1.21kb
../../public/vite/assets/taos.e8de4759.jpg                  15.75kb
../../public/vite/manifest-assets.json                      0.00kb
../../public/vite/manifest.json                             0.71kb
../../public/vite/assets/classic_taos_interop.c0bfecd9.js   1.89kb / brotli: 0.74kb
../../public/vite/assets/classic_taos_interop.c0bfecd9.js.map 8.42kb
../../public/vite/assets/style.0c577cb2.css                 21.96kb / brotli: 3.64kb
../../public/vite/assets/duo_mfa.f66d223f.js                36.33kb / brotli: 9.64kb
../../public/vite/assets/duo_mfa.f66d223f.js.map            149.38kb
../../public/vite/assets/main.007354ee.js                   124.29kb / brotli: 26.18kb
../../public/vite/assets/main.007354ee.js.map               391.89kb
../../public/vite/assets/vendor.3f056704.js                 302.28kb / brotli: 79.16kb
../../public/vite/assets/vendor.3f056704.js.map             1199.71kb

{
  "classic_taos_interop.tsx": {
    "file": "/vite/assets/classic_taos_interop.c0bfecd9.js",
    "src": "classic_taos_interop.tsx",
    "isEntry": true,
    "imports": [
      {
        "file": "/vite/assets/vendor.3f056704.js"
      },
      {
        "file": "/vite/assets/duo_mfa.f66d223f.js",
        "imports": [
          {
            "file": "/vite/assets/vendor.3f056704.js"
          }
        ],
        "assets": [
          "assets/close.6dbfea5e.svg"
        ]
      }
    ]
  },
  "main.tsx": {
    "file": "/vite/assets/main.007354ee.js",
    "src": "main.tsx",
    "isEntry": true,
    "imports": [
      {
        "file": "/vite/assets/vendor.3f056704.js"
      },
      {
        "file": "/vite/assets/duo_mfa.f66d223f.js",
        "imports": [
          {
            "file": "/vite/assets/vendor.3f056704.js"
          }
        ],
        "assets": [
          "assets/close.6dbfea5e.svg"
        ]
      }
    ],
    "assets": [
      "assets/taos.e8de4759.jpg"
    ]
  },
  "_vendor.3f056704.js": {
    "file": "/vite/assets/vendor.3f056704.js"
  },
  "_duo_mfa.f66d223f.js": {
    "file": "/vite/assets/duo_mfa.f66d223f.js",
    "imports": [
      {
        "file": "/vite/assets/vendor.3f056704.js"
      }
    ],
    "assets": [
      "assets/close.6dbfea5e.svg"
    ]
  }
}

i added some logging to my local vite-plugin-ruby installation, and i see the style file being in the rollup bundle within the generateBundle function

vite_ruby/vite-plugin-ruby/src/manifest.ts

Lines 77 to 88 in dd4ac90

	async generateBundle (_options, bundle) {
	const manifest: AssetsManifest = new Map()
	extractChunkStylesheets(bundle, manifest)
	await fingerprintRemainingAssets(this, bundle, manifest)
	debug({ manifest })
	this.emitFile({
	fileName: 'manifest-assets.json',
	type: 'asset',
	source: JSON.stringify(Object.fromEntries(manifest), null, 2),
	})
	},

but it doesnt seem to end up in the manifest used by vite_rails. and the manifest-assets.json file is just an empty object {}.

rollup bundle output

...
  'assets/style.0c577cb2.css': {
    fileName: 'assets/style.0c577cb2.css',
    isAsset: [Getter],
    name: 'style.css',
    source: '[i omitted this]'
    type: 'asset'
  },
...

i noticed theres some filtering for asset chunks in extractChunkStylesheets, so im wondering if the source of the problem is around there

vite_ruby/vite-plugin-ruby/src/manifest.ts

Lines 33 to 47 in dd4ac90

	function extractChunkStylesheets (bundle: OutputBundle, manifest: AssetsManifest) {
	const cssFiles = new Set(
	Object.values(config.build.rollupOptions.input as Record<string, string>)
	.filter(file => CSS_EXTENSIONS_REGEX.test(file))
	.map(file => path.relative(config.root, file)),
	)
	Object.values(bundle).filter(chunk => chunk.type === 'asset' && chunk.name)
	.forEach((chunk) => {
	// NOTE: Rollup appends `.css` to the file so it's removed before matching.
	// See `resolveEntrypointsForRollup`.
	const src = withoutExtension(chunk.name!)
	if (cssFiles.has(src)) manifest.set(src, { file: chunk.fileName, src })
	})
	}

Reproduction 🐞

im hoping i provided enough info to help solve. if you need more info though i can spend some time trying to set something up to repro

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.18
vite_rails: 2.0.12
rails: 6.0.3.3
node: v12.15.0
npm: 7.9.0
yarn: 1.22.4
pnpm: 
ruby: jruby 9.2.14.0 (2.5.7) 2020-12-08 ebe64bafb9 OpenJDK 64-Bit Server VM 11.0.10+9 on 11.0.10+9 +jit [darwin-x86_64]

installed packages:
[email protected] [removed]taos
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

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:

▶ DEBUG=vite-plugin-ruby:* bin/vite build
Building with Vite ⚡️
vite v2.4.3 building for production...
transforming...
✓ 594 modules transformed.
rendering chunks...
{
  fileName: 'assets/close.6dbfea5e.svg',
  isAsset: [Getter],
  name: undefined,
  source: <Buffer 3c 73 76 67 20 76 65 72 73 69 6f 6e 3d 22 31 2e 31 22 20 69 64 3d 22 43 61 70 61 5f 31 22 20 78 6d 6c 6e 73 3d 22 68 74 74 70 3a 2f 2f 77 77 77 2e 77 ... 1194 more bytes>,
  type: 'asset'
}
{
  fileName: 'assets/taos.e8de4759.jpg',
  isAsset: [Getter],
  name: undefined,
  source: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 64 00 64 00 00 ff e1 00 88 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 05 01 12 00 03 00 00 00 01 00 01 ... 16074 more bytes>,
  type: 'asset'
}
{
  fileName: 'assets/style.0c577cb2.css',
  isAsset: [Getter],
  name: 'style.css',
  source: '[removed]',
  type: 'asset'
}
../../public/vite/assets/close.6dbfea5e.svg                 1.21kb
../../public/vite/assets/taos.e8de4759.jpg                  15.75kb
../../public/vite/manifest-assets.json                      0.00kb
../../public/vite/manifest.json                             0.71kb
../../public/vite/assets/classic_taos_interop.c0bfecd9.js   1.89kb / brotli: 0.74kb
../../public/vite/assets/classic_taos_interop.c0bfecd9.js.map 8.42kb
../../public/vite/assets/style.0c577cb2.css                 21.96kb / brotli: 3.64kb
../../public/vite/assets/duo_mfa.f66d223f.js                36.33kb / brotli: 9.64kb
../../public/vite/assets/duo_mfa.f66d223f.js.map            149.38kb
../../public/vite/assets/main.007354ee.js                   124.29kb / brotli: 26.18kb
../../public/vite/assets/main.007354ee.js.map               391.89kb
../../public/vite/assets/vendor.3f056704.js                 302.28kb / brotli: 79.16kb
../../public/vite/assets/vendor.3f056704.js.map             1199.71kb
2021-07-29T05:58:37.867Z vite-plugin-ruby:config {
  base: '/vite/',
  build: {
    emptyOutDir: true,
    sourcemap: true,
    cssCodeSplit: false,
    assetsDir: 'assets',
    manifest: true,
    outDir: '../../public/vite',
    rollupOptions: { input: [Object], output: [Object] }
  },
  root: '[removed]taos/src/entrypoints',
  server: {
    host: 'localhost',
    https: false,
    port: 3036,
    strictPort: true,
    fsServe: { root: '[removed]taos' }
  },
  entrypoints: {
    classic_taos_interop: '[removed]taos/src/entrypoints/classic_taos_interop.tsx',
    main: '[removed]taos/src/entrypoints/main.tsx'
  }
}
2021-07-29T05:58:44.011Z vite-plugin-ruby:assets-manifest { manifest: Map {} }

Screenshots 📷

n/a

Importing CSS modules fails

Hi, really love this project, and super excited to continue testing it out :)

In one of my Javascript files, I'm attempting to import CSS Modules via

import styles from './styles.module.css'

but this is generating errors like the following in my Chrome console

GET http://localhost:3002/vite-dev/@fs/app/javascript/src/components/LeftNav/styles.module.css net::ERR_ABORTED 404 (Not Found)

am I missing a step here?

MissingEntrypointError logs can get really long

vite_ruby/vite_ruby/lib/vite_ruby/missing_entrypoint_error.rb

Line 19 in 97e7e96

#{ "\nContent in your manifests:\n#{ JSON.pretty_generate(manifest) }\n" if last_build.success }

This is a pretty minor point, but for large projects printing out the entire manifest can be a little overwhelming, especially if one is doing something like saving test output from acceptance tests.

There could be a lot of possible solutions, eg:

• only print if the manifest text is under a certain line-count
• only list entrypoints or entrypoints that meet some sort of matching criteria
• something else?

Or maybe this isn't a big enough deal to address...

@ElMassimo I'd be happy to make a contribution if you think it'd be useful!

Support `config/vite.rb` for advanced configuration

Background 📜

Currently, there are two main ways to configure Vite Ruby:

• a shared config/vite.json file
• override settings using environment variables

Feature Request ✨

Adding support for an optional config/vite.rb file that is called when resolving the configuration would make it easier to configure ViteRuby.env as needed regardless of how Vite Ruby is executed (rake task, binstub, or bundle exec).

Documentation 📖

Since any configuration in this ruby file can not be read when invoking the node vite executable directly, this would be regarded an advanced feature, and config/vite.rb would not be added during installation.

Images only loading from within `entrypoints` directory

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

Packages

npm

• "vite": "^2.4.1"
• "vite-plugin-environment": "^1.0.1"
• "vite-plugin-full-reload": "^0.2.2"
• "vite-plugin-ruby": "^2.0.4"

Gems

• vite_rails (2.0.12)
• vite_ruby (1.2.15)

Description 📖

I've been trying to migrate a Rails Webpacker app to vite-rails, but I'm encountering a problem that appears to be a bug (possibly a regression), according to the troubleshooting guide.

My app/frontend directory matches that in the "entrypoints" section of the docs.

I'm trying to use vite_asset_path to load an image kept in app/frontend/images, but is isn't loading, and it's not present in the public/vite/assets directory. If I move the image to inside app/frontend/entrypoints, then vite_asset_path is able to load it.

This is confusing because the troubleshooting guide specifically answers a question about images "only load[ing] if placed on entrypoints".

Adding to the confusion, one of the examples for vite_asset_path references images/logo.svg, without specifically mentioning where this images directory exists, which gives the impression that this is the example images directory mentioned in the "entrypoints" section.

Is this actually a bug, and loading from app/frontend/images should be possible? Or is it only the case that vite_asset_path will only be able to see anything kept in app/frontend/entrypoints?

Whatever the case, I think the Rails tag helper docs and troubleshooting guide are confusing matters a little, and I would have also expected a warning or error upon passing a file into vite_asset_path that isn't found in the manifest.

I've checked the example Rails app, which does keep its images in app/frontend/entrypoints/images, so after all this I can't figure out if I've read the docs incorrectly, or if something's missing from the docs, or if the docs are incorrect, or if all of this is actually a bug!

Sorry for writing such a huge issue. Any help would be appreciated!

Vite.json clobbers vite.config.ts custom https configuration

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

Description 📖

Vite's server.https option accepts either a boolean or an instance of https.ServerOptions. This allows users to specify their own SSL certificates for the dev server.

The Vite Ruby plugin coerces https to a boolean, which is then merged on top of the server configuration in vite.config.js. This overwrites any custom https config and prevents Vite Ruby users from using their own SSL certificates in dev.

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.1.0
vite_rails: 2.0.3
rails: 6.1.3
node: v15.10.0
npm: 7.5.3
yarn: 1.22.10
pnpm: 
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin20]

installed packages:
[email protected] /Users/derozier/Sites/sagacity-media/citycms
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Configuration

vite.config.ts

...
export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue()
  ],
  server: {
    https: {
      key: readFileSync("config/localhost-key.pem"),
      cert: readFileSync("config/localhost.pem")
    }
  }
})

config/vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036,
    "host": "localhost"
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test"
  }
}

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:

vite-plugin-ruby:config {
  vite-plugin-ruby:config   base: '/vite-dev/',
  vite-plugin-ruby:config   build: {
  vite-plugin-ruby:config     assetsDir: 'assets',
  vite-plugin-ruby:config     emptyOutDir: false,
  vite-plugin-ruby:config     outDir: '../../../public/vite-dev',
  vite-plugin-ruby:config     manifest: true,
  vite-plugin-ruby:config     rollupOptions: { input: [Object] },
  vite-plugin-ruby:config     sourcemap: false
  vite-plugin-ruby:config   },
  vite-plugin-ruby:config   root: '...',
  vite-plugin-ruby:config   server: { host: 'localhost', https: false, port: 3036, strictPort: true },
  vite-plugin-ruby:config   entrypoints: {
  ...
  vite-plugin-ruby:config   }

[vite-plugin-ruby:assets-manifest] Cannot read property 'substr' of undefined

Description 📖

When use image in stylesheet and run build, got error

Reproduction 🐞

just add css like this in application.scss

app/javascript/
├── entrypoints
│   ├── application.js
│   ├── application.scss
├── images
│   └── demo.png
└── stylesheets
    └── main.scss

body {
  background: url("../images/demo.png")
}

Vite Ruby Info

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

bin/vite present?: true
vite_ruby: 1.2.3
vite_rails: 2.0.9
rails: 6.1.3.1
node: v15.4.0
npm: 7.0.15
yarn: 1.22.5
pnpm:
ruby: ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin18]

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:

Building with Vite ⚡️
vite v2.1.5 building for production...
transforming...
✓ 68 modules transformed.
rendering chunks...
[vite-plugin-ruby:assets-manifest] Cannot read property 'substr' of undefined
error during build:
TypeError: Cannot read property 'substr' of undefined
    at withoutExtension (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:50:19)
    at /Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:123:19
    at Array.forEach (<anonymous>)
    at extractChunkStylesheets (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:122:69)
    at Object.generateBundle (/Users/nyrf/Codes/rails/demo/vite_demo/node_modules/vite-plugin-ruby/dist/index.js:149:7)
    at /Users/nyrf/Codes/rails/demo/vite_demo/node_modules/rollup/dist/shared/rollup.js:18863:25

Build with Vite failed! ❌

CSP style_src unsafe_inline needed for development

On installation, several lines are added to content_security_policy.rb. Based on my testing, an additional one is required to support inline styles when css is imported via JS:

policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?

Vitest fails when using vite-plugin-ruby

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

Description 📖

When adding the vite-plugin-ruby in the vite.config.js, vitest fails. It works when removing vite-plugin-ruby, and it also works with non-Vue tests. It fails with the error failed to load /vite-development/@vite/client.

Reproduction 🐞

https://stackblitz.com/edit/node-sr8dj2?file=vite.config.js

Screenshots 📷

Production build contains sourcemaps when they are turned off

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

Description 📖

bundle exec vite build generates source maps, where vite as default has them turned off. Even setting build.sourcmap to false explicitly does not work. As the result, source maps are pushed to the production environment.

issue with dry-cli 0.7

Last week I did a clean install of the vite_rails gem.

Just tried to do one now, and it didn't work.

This was resolved by going into my Gemfile.lock and downgrading dry-cli to version 0.6.

Support for Rails 4.2

Is your feature request related to a problem? Please describe.
Thanks for the great plugin for Rails and Vite, unfortunately I am unable to use it on my project since the plugin requires Rails 5.1 and higher, but I am stuck with 4.2 and can not do anything about it.

Describe the solution you'd like
Is there anything that could be done here? Is it possible to add support for older versions of Rails, specifically 4.2? Webpacker has it supported and I would like to migrate from Webpacker to Vite with this plugin but without upgrading Rails. Any help would be much appreciated, thanks!

Is it possible do not use npx?

In the docker with alpine linux and node it's not necessary to install npm, because yarn already used.
Here

vite_ruby/vite_ruby/lib/vite_ruby/cli/install.rb

Line 78 in b1f8135

stdout, stderr, status = Open3.capture3({}, "npx --yes --package @antfu/ni -- ni -D #{ deps }")

uses both packet managers.
I hope it could be one or other situation, but not both

Support for @vitejs/plugin-legacy

Is your feature request related to a problem? Please describe.

In my RoR project support for older browsers (not supporting ES modules) is required. There is a great plugin from the Vite contributors - @vitejs/plugin-legacy - to support that case.

Unfortunately, it does not work properly with vite_rails_legacy (I did not check the vite_rails). The manifest.json does not include additional chunks generated by the plugin, which are required to make it work properly.

For now, I added the following code to the application layout:

%head
  = vite_client_tag
  = vite_javascript_tag 'application'
  = vite_javascript_tag 'application-legacy', type: nil, nomodule: ""

The application-legacy chunk is generated, but not the rest.

Describe the solution you'd like

I looked into the source code of the plugin, and it looks, that we should have also a list of chunks.

EDIT:

I bootstraped vite on node, and legacy plugin generates more sophisticated output (regardless of Safari 10 bugfix):

<script nomodule src="/assets/polyfills-legacy.0809adaa.js"></script>
<script
  nomodule
  id="vite-legacy-entry"
  data-src="/assets/index-legacy.4271aeaa.js"
>
  System.import(
    document.getElementById("vite-legacy-entry").getAttribute("data-src")
  );
</script>

I am not sure how it can be integrated with this tool (as just output chunks will not be sufficient).

Describe alternatives you've considered

n/a.

Support for inferred `index` entrypoints

Is your feature request related to a problem? Please describe.
The current implementation allows to place entrypoints to root of entrypointsDir but all other directories inside entrypointsDir are ignored. At our project we have hierarchy structure for entries and then we are referencing the path at pack_tag.

For example:

frontend
  - entrypoints
    - application.ts
    - features
      - feature_a
        - index.ts
      - feature_b
        - index.ts
      - feature_c
        - index.ts

Then in .html.erb files:

<%= vite_typescript_tag 'features/feature_a' %>
<%= vite_typescript_tag 'features/feature_c' %>

Describe the solution you'd like
The current implementation should be edited to support nested directories in entrypoints directory and detect for index.ts files. Actually webpacker supports nested directories but doesn't look for index.ts.

With the index.(ts,js) lookup we can simplify the import from

<%= vite_typescript_tag 'features/feature_a/index' %>

to

<%= vite_typescript_tag 'features/feature_a' %>

So the behavior will be more consistent with vite and other bundlers which are auto-detecting the index file too.

---

Adding info about used libraries and versions

packages:

"vite": "^2.4.2",
"vite-plugin-ruby": "^2.0.4"

gem:

gem 'vite_rails'
gem 'rails', '6.1.3.2'

Transforming const to the configured target environment

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

Description 📖

When running bin/vite build on this repository, I get the following error that I can't trace back to the root of the issue:

Building with Vite ⚡️
 > vite.config.ts:12:0: error: Transforming const to the configured target environment ("es5") is not supported yet
    12 │ const version = "0.1.0";
       ╵ ~~~~~
   tsconfig.json:11:14: note: The target environment was set to "es5" here
    11 │     "target": "es5",
       ╵               ~~~~~

 > vite.config.ts:13:0: error: Transforming const to the configured target environment ("es5") is not supported yet
    13 │ const isDistEnv = process.env.RAILS_ENV === "production";
       ╵ ~~~~~
   tsconfig.json:11:14: note: The target environment was set to "es5" here
    11 │     "target": "es5",
       ╵               ~~~~~

 > vite.config.ts:15:0: error: Transforming const to the configured target environment ("es5") is not supported yet
    15 │ const bugsnagOptions = {
       ╵ ~~~~~
   tsconfig.json:11:14: note: The target environment was set to "es5" here
    11 │     "target": "es5",
       ╵               ~~~~~

failed to load config from /Users/pepibumur/src/github.com/craftweg/buildify/projects/app/vite.config.ts
error during build:
Error: Build failed with 3 errors:
vite.config.ts:12:0: error: Transforming const to the configured target environment ("es5") is not supported yet
vite.config.ts:13:0: error: Transforming const to the configured target environment ("es5") is not supported yet
vite.config.ts:15:0: error: Transforming const to the configured target environment ("es5") is not supported yet

For some reason esbuild is trying to parse the tsconfig.json and vite.config.ts file.

Reproduction 🐞

1. Clone this repository
2. cd into projects/app.
3. Install dependencies bundle install && yarn install.
4. Run bin/vite build

Vite Ruby Info

``` Running via Spring preloader in process 56570 bin/vite present?: true vite_ruby: 1.2.11 vite_rails: 2.0.11 rails: 6.1.3.2 node: v16.0.0 npm: 7.10.0 yarn: 1.22.10 pnpm: ruby: ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin20]

installed packages:
buildify-app@ /Users/pepibumur/src/github.com/craftweg/buildify/projects/app
├─┬ @vitejs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

</details>