Webpacker: Error resolving relative paths

[jtmarmon]

I'm trying to use blueprintjs and am getting the following error when loading the blueprint stylesheets:

Module not found: Error: Can't resolve '../resources/icons/icons-16.eot' in ...

I found this issue: #384 and attempted the suggested resolution to no avail. I then looked through some of the resulting security issues/patches and discovered this fix was committed to master: https://github.com/rails/webpacker/blob/b2d899b25fb9f1cb11426b1b5e2d699c680bdcf6/package/loaders/style.js#L15

I'm using webpacker 4.0.0.pre.pre.2 so I believe I should have the resolve-url-loader but it's still not working. Can someone point me in the right direction on how to debug this issue?

[gauravtiwari]

@jtmarmon We have removed resolve url loader from the later versions of webpacker since the usage wasn't very common and it impacts compilation performance.

Have you tried the suggestion in the docs: https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

[josephecombs]

resolve-url-loader absolutely does not work in the way the docs suggest it will. I am doing something like this with 4.0.0.pre.pre.2:

vendor_styles.scss
@import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';

development.js

environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
});

rake assets:precompile

ERROR in ./app/javascript/packs/vendor_styles.scss (./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./node_modules/resolve-url-loader??ref--6-3!./node_modules/resolve-url-loader??ref--6-4!./node_modules/sass-loader/lib/loader.js??ref--6-5!./app/javascript/packs/vendor_styles.scss)
Module not found: Error: Can't resolve '../fonts/Material-Design-Iconic-Font.ttf?v=2.2.0' in '/Users/jcombs/Desktop/CTRL/app/javascript/packs'
resolve '../fonts/Material-Design-Iconic-Font.ttf?v=2.2.0' in '/Users/jcombs/Desktop/CTRL/app/javascript/packs'
  using description file: /Users/jcombs/Desktop/CTRL/package.json (relative path: ./app/javascript/packs)

This indicates that the import statement IS finding the css (which is installed in node_modules), but resolve-url-loader is not finding the referenced font files inside node_modules.

[openscript]

I'm struggling with the same problem. I cannot load the fonts from the roboto-fontface:

@import '~roboto-fontface/css/roboto/sass/roboto-fontface';

This will result in the following errors:

    [...]
    ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/packs/fonts.scss
    Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-ThinItalic.woff2' in '/home/vialibera/app/javascript/packs'
     @ ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/packs/fonts.scss 7:2490-2546 7:2759-2815

My environment looks like this:

const { environment } = require('@rails/webpacker');
const typescript =  require('./loaders/typescript');

environment.loaders.get('sass').use.splice(-1, 0, {
    loader: 'resolve-url-loader'
});
environment.loaders.append('typescript', typescript);

module.exports = environment;

[Yeboster]

Hello, I face the same type of issue:

Module not found: Error: Can't resolve './themes/default/assets/fonts/outline-icons.woff' in 'project/app/javascript/packs'

This is my environment.js configuration

`const { environment } = require("@rails/webpacker");

environment.loaders.get("sass").use.splice(-1, 0, {
loader: "resolve-url-loader"
});

module.exports = environment;`

May I ask you how did you fix the problem ?

Cheers.

[woodhull]

Just encountered the same problem now that I'm trying the released version of webpacker 4.

I've got fonts in the /assets/fonts and a typography sass file that is shared between asset pipeline and components.

[thewoolleyman]

Same problem, with @blueprintjs.

ActionView::Template::Error (File to import not found or unreadable: ~@blueprintjs/icons/src/icons

As others said above, the resolve-url-loader approach suggested in the docs is NOT working for me.

[thewoolleyman]

What worked

OK, I got this working for my case, and I did NOT need to use resolve-url-loader. This is with rails (6.0.0.rc1) and webpacker (4.0.7), in a simple dummy rails app.

For context, I was just trying to override a scss variable in @blueprintjs.

All I had to do was create an *.scss file, somewhere inside my javascript/packs, and import it normally. It has this content (I was just making the header tall as a test):

// THIS WORKS TO OVERRIDE THE SCSS VARIABLE!!!!!!!!
// Notice no !important is needed, and we can import the root file with no error
$pt-navbar-height: 328px;
@import '../../../../node_modules/@blueprintjs/core/src/blueprint';

@gauravtiwari, you might want to consider updating the docs accordingly, as the instructions in css.md that you are referring people to (and closed this issue based on) are apparently not working (and not necessary) with the recent rails/webpacker versions I mentioned above.

Thanks!
-- Chad

---

What didn't work

Per the comments above, when I was trying to do a similar approach under app/assets/stylesheets, it did NOT just work like this. For context, I'll explain:

First, this did not work at all under app/assets/stylesheets, even with resolve-url-loader set up - it gets the same problem everyone in this thread describes:

// THIS DOES NOT WORK TO OVERRIDE THE SCSS VARIABLE !!!!!
// `File to import not found or unreadable: ~@blueprintjs/icons/src/icons.`
$pt-navbar-height: 328px !important;
@import '../../../node_modules/@blueprintjs/core/src/blueprint.scss';

---

What worked, but in a not-useful way

I WAS able to get it to work under app/assets/stylesheets, but only by directly importing a sub-file which did not have any ~@blueprintjs in the library. Obviously this is not a viable approach in a real app, and you should use the first one I mentioned above, but just including this for reference:

// THIS WORKS TO OVERRIDE THE SCSS VARIABLE!!!!!!!!
// Yes the !important is needed.  No, !default doesn't work.  You probably don't want to do this, just import the root module inside your `javascript/packs` folder:
$pt-navbar-height: 328px !important;
@import '../../../node_modules/@blueprintjs/core/src/components/navbar/navbar';

[jakeNiemiec]

It seems to be an ongoing issue with that library https://github.com/palantir/blueprint/issues/123. I don't think webpacker can meaningfully fix that problem.

// THIS DOES NOT WORK TO OVERRIDE THE SCSS VARIABLE !!!!!
// `File to import not found or unreadable: ~@blueprintjs/icons/src/icons.`
$pt-navbar-height: 328px !important;

~@blueprintjs/icons/src/icons is invalid (as far as webpack is concerned), you would need ~@blueprintjs/icons/src/blueprint-icons.

---

It's one of those things that is highly dependant on how the library wants you to consume the package. In this issue, I see a few differing problems; if anyone is still running into issues, please make a new issue including:

• ./package.json
• ./config/webpack/environment.js
• ./config/webpacker.yml
• (the pack file causing the issue)
• the full error message (even the parts you wouldn’t think is relevant)

Edit: pertinent comment from the author of resolve-url-loader

[thewoolleyman]

@jakeNiemiec OK, thanks for the response. Honestly I don't understand enough about the problem to provide any more useful input, and after wasting 12 hours on this I'm ready to move on with my life.

Perhaps it is something that blueprint and the other libraries mentioned above are doing wrong.

In any case, my comment and code are here in case they help anyone in the future. Thanks for your work on webpacker!