How to configure ~/ alias in webpacker?

[matoni109]

Hi,

I saw this gem over at the Inertia Discord, but I'm having some issues getting it setup.

I've not been about to get the modules to resolve with the default paths, I've had to do below not to get webpack-dev compiling errors and I get

RecipeShow.js:91 Uncaught (in promise) Error: Cannot find module '~/api/Users/SessionsApi'

I'm also getting below error if I fix the paths ?

Any ideas ?

Repo where I'm trying to roll this out
=> https://github.com/matoni109/inertia-recipes/tree/active-storage

I'm actually doing this to try and get the Avatar object/url

/* error */

index.js:22 GET http://localhost:3000/recipes/2 500 (Internal Server Error)

index.js:50 Uncaught (in promise) Error: Internal Server Error
    at Object.unwrapResponseError (index.js:50)
    at index.js:25

/* all.js */

// JsFromRoutes CacheKey 59a045b933dbb474391f6c2be55a6ca6
//
// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
// export { default as usersSessions } from "~/api/Users/SessionsApi";
// export { default as usersRegistrations } from "~/api/Users/RegistrationsApi";
// export { default as recipes } from "~/api/RecipesApi";
// export { default as inertiaExample } from "~/api/InertiaExampleApi";
// export { default as pages } from "~/api/PagesApi";
// export { default as users } from "~/api/UsersApi";

export { default as usersSessions } from "./Users/SessionsApi";
export { default as usersRegistrations } from "./Users/RegistrationsApi";
export { default as recipes } from "./RecipesApi";
export { default as inertiaExample } from "./InertiaExampleApi";
export { default as pages } from "./PagesApi";
export { default as users } from "./UsersApi";

import React from "react";
import { InertiaLink } from "@inertiajs/inertia-react";
import { Inertia } from "@inertiajs/inertia";
import { recipes } from "../api/all";
import SearchFilter from "../Components/SearchFilters";
const Recipe = ({ user, recipe }) => {
  const recipeTest = recipes.get({ id: 2 });

  const deleteHandler = () => {
    console.log(`/recipes/${recipe.id}`);
    // Inertia.delete(`/recipes/${recipe.id}`);
    // Inertia.visit(`/recipes/${recipe.id}`, { method: "delete" });
    Inertia.delete(`/recipes/${recipe.id}`, {
      onBefore: () => confirm("Are you sure you want to delete this user?"),
    });
  };
  return (
    <>

/* routes */

Rails.application.routes.draw do
  #
  # export the whole app to js_routes
  defaults export: true do
    devise_for :users, skip: %i[sessions passwords registrations]
    as :user do
      get 'login', to: 'users/sessions#new', as: :new_user_session
      post 'login', to: 'users/sessions#create', as: :user_session
      get 'new', to: 'users/registrations#new', as: :new_user_registration
      post 'new', to: 'users/registrations#create', as: :user_registration
      get 'edit', to: 'users/registrations#edit', as: :edit_user_registration
      patch 'edit', to: 'users/registrations#update', as: :update_user_registration
      match 'logout', to: 'users/sessions#destroy', as: :destroy_user_session, via: Devise.mappings[:user].sign_out_via
    end

    root to: 'recipes#index'
    get 'inertia-example', to: 'inertia_example#index'
    get 'pages/home'
    # root to: 'pages#home'
    resources :recipes, only: %i[index show new create edit update destroy]
    # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
    resources :users, only: [:show]
  end
end

[ElMassimo]

Hi Chris! @matoni109

In order for webpack to resolve ~/ paths you need to configure an alias (comes by default if you are using Vite Ruby).

Here's an example of how to configure an alias in webpacker.

module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, '..', '..', 'app/javascript'),

Make sure to adjust the resolve call based on the location of the file, you want ~ to resolve to app/javascript, so that ~/api is resolved to app/javascript/api where the files are located.

[matoni109]

Thanks @ElMassimo ,

I don't seem to have a webpack.config.js

I'm not sure where to put the alias into below ?

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should look up modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    # Inject browserside javascript that required by both HMR and Live(full) reload
    inject_client: true
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
    inline: true
    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
    overlay: true
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    disable_host_check: true
    # This option lets the browser open with your local IP
    use_local_ip: false
    # When enabled, nothing except the initial startup information will be written to the console.
    # This also means that errors or warnings from webpack are not visible.
    quiet: false
    pretty: false
    headers:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: "**/node_modules/**"

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

[ElMassimo]

@matoni109

I don't seem to have a webpack.config.js

Webpacker uses different configuration files, which are located in config/webpack.

Webpacker will load config/webpack/base.js in all environments. Using the merge helper, we can add the resolve.alias option to the default configuration provided by Webpacker.

const path = require('path')
const { webpackConfig, merge } = require("@rails/webpacker");

// __dirname is config/webpack because the file is config/webpack/base.js
const jsRoot = path.resolve(__dirname, '../../app/javascript')

module.exports = merge(webpackConfig, {
  resolve: {
    alias: {
      '~': jsRoot,
    },
  },
})

As a result, you no longer need to use relative imports, which are noisy and error-prone. For example:

- import AlertForm from "../../Components/AlertForm";
+ import AlertForm from "~/Components/AlertForm";