How to include the css from a npm package in rails 6

Question

I'm developing a rails 6 application and I have a problem with a npm package and the Rails pipeline. I suspect that the problem is my lack of experience and the npm package structure. I need to use the npm package phenogrid. This package has the following structure:

dist
- fonts
- images
- phenogrid-bundle.css
- phenogrid-bundle.js
js
- phenogrid.js
- other files

As first implementation I've included this package as following:

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("bootstrap");
require("cytoscape");
require("phenogrid"); // HERE
global.toastr = require("toastr");

import 'phenogrid/dist/phenogrid-bundle.css' //HERE
import "../stylesheets/application"

app/views/patients/show.html.erb (View that load the js pack that load phenogrid)

<%= javascript_packs_with_chunks_tag 'hpo_interface' %>

<div id="cy_hpo_demo" style="width: '800px', height: '800px' "></div>
.
.

app/javascript/packs/hpo_interface.js

import $ from 'jquery';
import cytoscape from 'cytoscape';
import phenogrid from 'phenogrid'; // here
.
.
Phenogrid.createPhenogridForElement( ...... )

All this setting makes phenogrid works perfectly in my development environment. When I deploy this configuration in my production environment (AWS server), the js widget works but the css is gone. Looking for a solution I found in webpacker documentation about this: https://github.com/rails/webpacker/blob/master/docs/css.md. I realized that I didn't use stylesheet_pack_tag and other steps. So I modified my implementation to:

app/views/patients/show.html.erb

<%= stylesheet_pack_tag 'phenogrid-bundle' %>
<%= javascript_packs_with_chunks_tag 'hpo_interface' %>

<div id="cy_hpo_demo" style="width: '800px', height: '800px' "></div>
.
.

app/javascript/packs/stylesheets/application.scss (This file is loaded by app/javascript/packs/application.js.)

@import 'toastr';
@import 'phenogrid/dist/phenogrid-bundle.css';
@import 'bootstrap/scss/bootstrap';

With these modifications, in development environment arise de following error in browser console:

Uncaught Error: Cannot find module './fonts/fontawesome-webfont.eot?v=4.7.0'
    at webpackMissingModule (application.scss:4)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (application.scss:4)
    at __webpack_require__ (bootstrap:79)
    at Object../app/javascript/stylesheets/application.scss (application.scss?4568:2)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:31)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback (bootstrap:32

The required file is within the fonts folder of the phenogrid package so I look again to solve this problem and in webpacker documentation I found a workaround focused in replace the relative urls at asset compilation time: https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader. I applied the proposed solution but the error persists. Also I tried this: https://github.com/rails/webpacker/blob/a84a4bb6b385ae17dd775a6034a0b159b88c6ea9/docs/webpack.md#url-loader and the error was the following:

phenogrid-bundle.css:10 Uncaught Error: Cannot find module './images/ui-icons_444444_256x240.png'
    at webpackMissingModule (phenogrid-bundle.css:10)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/phenogrid/dist/phenogrid-bundle.css (phenogrid-bundle.css:10)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/phenogrid/dist/phenogrid-bundle.css (phenogrid-bundle.css?18d4:2)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (application.js:1)
    at Module../app/javascript/packs/application.js (application.js:31)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)

I think that setting the loaders can fix my problem but I'm completely new with webpacker and the rails js/asset pipeline. I don't know how to fix this problem so any suggestion is more than welcome. Thank you in advance Pedro Seoane

Jerry Chen Jerry Chen · Accepted Answer · 2021-03-09T04:40:59

yarn add -D resolve-url-loader

// webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    sourceMap: true,
    absolute: true
  }
})

How to include the css from a npm package in rails 6

1 Answers