Skip to content

Import aliases in Rails tag helpers #566

@Splines

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.

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