activeadmin_addons: Brokenness with jsbundling-rails?

I’ve got an app on Rails 7 using Propshaft, jsbundling-rails, and cssbundling-rails. It took some herculean effort to get as far as making jQuery / jQuery-UI available to ArcticAdmin (and possibly ActiveAdmin_Addons – I don’t recall), but I am stuck on getting the plugin’s NPM module to see Select2.

I’m using the --inject option to esbuild to inject jQuery and jQuery-UI but the same trick doesn’t seem to work for Select2.

Specifically, my package.json looks like this:

{
  "name": "core",
  "private": "true",
  "scripts": {
    "build:js:dev": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --inject:./app/javascript/hacks/jquery.js",
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds --minify --inject:./app/javascript/hacks/jquery.js",
    "build:css:dev": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --source-map --load-path=node_modules",
    "build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules"
  },
  "dependencies": {
    "@activeadmin/activeadmin": "^2.13.0",
    "@fortawesome/fontawesome-free": "^5.0.0",
    "activeadmin_addons": "^1.0.0",
    "arctic_admin": "^4.0.1",
    "chart.js": "^3.7.1",
    "chartkick": "^4.1.1",
    "graphiql": "1.8.9",
    "graphql": "^16.1.0",
    "graphql-ws": "^5.8.2",
    "punycode": "^2.1.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "esbuild": "^0.14.39",
    "sass": "^1.52.0"
  }
}

And the jquery hack looks like this:

export { default as $ } from 'jquery';
export { default as jQuery } from 'jquery';

import "../vendor/jquery-ui-1.12.1.min.js";

I tried vendoring select2 and importing it the same way, to no avail.

Of course, this all is very much a fairly ugly kludge but I’m not aware of any other way to make things work.

Perhaps you’re better situated to get things working under a Propshaft+cssbundling+jsbundling world?

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 17 (1 by maintainers)

Most upvoted comments

Thanks, Next.js looks definitely very interesting.

joker-777 on Jul 7, 2022

Part of the issue seems to be import paths. For the CSS, the correct import statement seems to be @import "select2/dist/css/select2";, not @import "select2". So I guess sass isn’t mapping things the same way Sprockets did and I’m not sure how to correct that.

On the JS side, I have absolutely no idea what’s going on, or how to correct it. Forcibly injecting Select2 alongside jQuery/jQuery-UI seems like it should work, but it just… doesn’t.

MrJoy on Jul 1, 2022

Specifically, when I try that, I wind up with this from cssbundler:

12:49:50 css.1     | Error: Can't find stylesheet to import.
12:49:50 css.1     |   ╷
12:49:50 css.1     | 1 │ @import 'select2';
12:49:50 css.1     |   │         ^^^^^^^^^
12:49:50 css.1     |   ╵
12:49:50 css.1     |   activeadmin_addons/src/stylesheets/all.scss 1:9           @import
12:49:50 css.1     |   app/assets/stylesheets/entrypoints/active_admin.scss 1:9  root stylesheet

And, in the browser console when loading up a page:

Uncaught TypeError: import_jquery.default.fn.select2 is undefined
    <anonymous> nested-select.js:1
    <anonymous> active_admin-15f5b399337c37d72457eb2acb943c285a27f33a.js:40128
[nested-select.js:1](http://localhost:5000/node_modules/activeadmin_addons/src/inputs/nested-select.js)
    <anonymous> nested-select.js:1
    <anonymous> active_admin-15f5b399337c37d72457eb2acb943c285a27f33a.js:40128

My JS bundle entrypoint is:

import Rails from "@rails/ujs";

Rails.start();

import "@activeadmin/activeadmin";

// N.B. We can't load this because it chokes trying to find Select2 and I have yet to figure out
// how to solve that.  Injecting it doesn't seem to work.  Importing it doesn't work.  Gahhh!
import "activeadmin_addons";

import "arctic_admin";

import "chartkick/chart.js";

And my CSS bundle entrypoint is:

@import "activeadmin_addons/src/stylesheets/all";

@import "arctic_admin/src/scss/main";

@import "../active_admin/monkeypatches";
@import "../active_admin/ux";
@import "../active_admin/widgets";

$fa-font-path: ".";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";

To get this far, I had to inject jQuery into the bundle forcibly, as you can see in the actual ticket body.

No matter what I do, I can’t get it to find select2.

MrJoy on Jul 1, 2022

I’ve forked the repo to remove the Sprockets dependency. https://github.com/FasterBetter/activeadmin_addons_nosprockets

So, it seems there’s a bit more that’s needed to make this work with Propshaft besides what I’ve discovered. It seems like getting this all sorted out will help add longevity to ActiveAdmin_addons.

MrJoy on Jun 28, 2022