Skip to content

Import aliases in Rails tag helpers #566

Description

@Splines

🎈 Scenario

Related to #564. I want to structure my Rails codebase component-wise and created an app/components/ folder. This folder contains subfolders like app/components/feature1/. My Vite sourceCodeDir stays app/frontend. To reflect this scenario, I've specified:

// extract of config/vite.json
"watchAdditionalPaths": [
  "app/components/**/*"
],
"additionalEntrypoints": [
  "app/components/**/*"
],

This allows me to do this:

<!-- app/components/feature1/index.html.erb -->
<%= vite_javascript_tag "/app/components/feature1/index" %>

where /app/components/feature1/index.js is a JavaScript file. This works as expected 🤗

🎈 Problem

However, I cannot use import aliases in Rails tag helpers. According to this tip:

In order to reference these files it's highly recommended to define your own import aliases: ~ see here

So, I specify:

// extract of vite.config.mts
resolve: {
    alias: {
      "@components": "/app/components",
    },
  },

However, doing the following results in a path that cannot be resolved by Vite:

<!-- app/components/feature1/index.html.erb -->

<!-- does not work -->
<%= vite_javascript_tag "@components/feature1/index" %>

<!-- works fine -->
<%= vite_javascript_tag "/app/components/feature1/index" %>

I've also tried variations like this one in your example repo:

// extract of vite.config.mts
resolve: {
    alias: {
      '@components/': `${resolve(__dirname, 'app/components')}/`,
    },
  },

But unfortunately without success. It would be great, if Rails tag helpers could support import aliases as well.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions