require_tree error

[antarr]

I'm trying to switch to import_maps. This error is showing when rendering the application layout require_tree argument must be a directory. When viewing active admin it works fine.

application.html.slim

doctype html
html lang="I18n.locale" 
  head
    title
      = @title
    meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    meta name="theme-color" content="#ffffff"

    = include_gon(watch: true)
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true, loading: 'eager', decoding: 'async', integrity: true, crossorigin: true, defer: true
    = javascript_importmap_tags
    = csrf_meta_tags
    = favicon_link_tag 'wevote.png', rel: 'icon', type: 'image/png', 'data-turbolinks-track' => true
    = favicon_link_tag 'wevote.png', rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png'
  body
    = render 'layouts/navigation/main_nav', disable_search: true, homepage: true
    = flash_messages
    main.application
      = yield
      = render_now
    section#search

admin.html.slim

doctype html
html
  head
    title WeVote
    meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
    = include_gon(watch: true)
    = stylesheet_link_tag 'admin', media: 'all', defer: true
    = javascript_importmap_tags "admin"
    = csrf_meta_tags
body
  = render 'layouts/navigation/admin'
  = flash_messages
  main.admin
    = yield

application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

// Import core dependencies
import $ from "jquery";
import autosize from "autosize";
import tether from "tether";

// Set up globals
window.$ = $;
window.jQuery = $;
window.Tether = tether;

// Rails dependencies
import * as Rails from "@rails/ujs";
Rails.start();
window.Rails = Rails;

import * as ActiveStorage from "@rails/activestorage";
ActiveStorage.start();

// Import channels
import "./channels";

// Third-party libraries
import "jquery-ui";
import "popper.js";
import "bootstrap";
import "bootstrap-notify";
import "jquery-mask-plugin";
import "select2";
import "jquery-textcomplete";
import "jquery-match-height";
import "jquery-jscroll";

// Import autocomplete-rails
import "./src/autocomplete-rails";
import "./src/facebook";

// Application components
const components = [
  "comment", "discussion", "follow", "follows", "hashtaggable", 
  "infinite_scroll", "news_feed", "preview-img", "question", 
  "remote_buttons", "report", "search", "sidebar", "upvote", 
  "vote", "verification", "claims"
];

// Load all components
components.forEach(component => {
  import(`./src/components/${component}`);
});

// Configure autocomplete
window.jQuery.railsAutocomplete = window.jQuery.railsAutocomplete || {};
window.jQuery.railsAutocomplete.options = window.jQuery.railsAutocomplete.options || {};
window.jQuery.railsAutocomplete.options.delay = 300;
window.jQuery.railsAutocomplete.options.autoFocus = true;

I've tried commenting out all imports and still get the same error

[dhh]

Can you post your config/importmap.rb? Probably something off there.

[antarr]

Can you post your config/importmap.rb? Probably something off there.

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application"
pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
pin "jquery-ui", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.min.js"
pin "autosize", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/autosize.min.js"
pin "tether", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tether.min.js"
pin "@rails/ujs", to: "https://cdn.jsdelivr.net/npm/@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js"
pin "@rails/activestorage", to: "https://cdn.jsdelivr.net/npm/@rails/[email protected]/app/assets/javascripts/activestorage.esm.js"
pin "popper.js", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
pin "bootstrap-notify", to: "https://cdn.jsdelivr.net/npm/[email protected]/bootstrap-notify.min.js"
pin "jquery-mask-plugin", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.mask.min.js"
pin "select2", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"
pin "jquery-textcomplete", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.textcomplete.min.js"
pin "jquery-match-height", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.matchHeight-min.js"
pin "jquery-jscroll", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.jscroll.min.js"

# Application components
pin_all_from "app/javascript/components", under: "components"
pin_all_from "app/javascript/src", under: "src"
pin_all_from "app/javascript/channels", under: "channels"

# Admin
pin "admin", to: "admin.js"

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

[dhh]

Ah, first, you have to refer exclusively to paths mapped in the importmap in your application.js file. So you can't do stuff like import "./channels", it has to be import "channels" (and channels have to be mapped in your importmap.

Second, if you're switching over to importmaps, I'd switch to Propshaft too. Then you don't need the config/manifest.js setup. If that's where the link_tree error is coming from.

But yeah, it's a considerable effort to switch when you already have an existing application like this. But I think you can get there! Best of luck ✌️