Webpacker: css-loader cannot resolve resources (.eot, .woff, etc.)

[btc]

In hello_react.jsx, I import hello_react.css:

import "./hello_react.css";

In hello_react.css, I import the CSS contained in a node_module:

@import "~@blueprintjs/core/dist/blueprint";

When webpacker builds, I get the following error:

ERROR in ./\~/css-loader?{"minimize":false}!./\~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/hello_react.css

Module not found: Error: Can't resolve '../resources/icons/icons-16.eot' in '/Users/btc/Documents/src/respectable/r3/react/app/javascript/packs'

icons-16.eot resides within node_modules/@blueprintjs/core/resources/icons. It is not in app/javascript/packs, but it seems like app/javascript/packs is the only place where the tool is configured to look. Is this a bug?

• [ ] My first instinct is that this may be a problem with the configuration of the css-loader in config/webpacker/loaders.

• [ ] My second instinct is that this may be a problem with the configuration in config/webpack/shared.js.

• [ ] My third instinct is that locating these font files requires https://github.com/bholloway/resolve-url-loader. However, my attempt to integrate the loader hasn't fixed the problem. It results in this error:

resolve-url-loader cannot operate: CSS error

no such file or directory, open app/javascript/packs/blueprint.css.map'

It's looking in app/javascript/packs again! That file is right next to blueprint.css in the directory of the node_modules dependency.

react (master) λ. ls -l node_modules/@blueprintjs/core/dist/                                                                                                                             1
total 5424
drwxr-xr-x   8 btc  staff      272 May 12 18:17 accessibility
-rw-r--r--   1 btc  staff   275808 May 12 14:02 blueprint.css
-rw-r--r--   1 btc  staff  1706972 May 12 14:02 blueprint.css.map

• [ ] My fourth instinct is that webpack's context is incorrect.

I understand that this may not actually be a problem with webpacker itself, and instead might be a problem with a dependency or god forbid a user error. However, it feels like this initial question belongs here. If I am mistaken, I apologize.

[gauravtiwari]

Alright so, I guess this is the issue with relative referencing. You can read more here - https://github.com/webpack-contrib/sass-loader#problems-with-url

BluePrint is using these urls for assets, which are causing the trouble -

@font-face {
  font-family: "Icons16";
  font-style: normal;
  font-weight: normal;
  src: url("../resources/icons/icons-16.eot?#iefix") format("embedded-opentype"), url("../resources/icons/icons-16.woff") format("woff"), url("../resources/icons/icons-16.ttf") format("truetype"); }

Steps to fix

yarn add resolve-url-loader

// Update loaders/sass.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

[gauravtiwari]

372 Probably add this to README?

Not sure if we can support a config for every library out there 😄

[btc]

Thanks. That worked (sort of).

Now, when I look at the resolved URL, I see the following:

  src: url(http://localhost:8080/packs/icons-16.eot) format("embedded-opentype"), url(http://localhost:8080/packs/icons-16.woff) format("woff"), url(http://localhost:8080/packs/icons-16.ttf) format("truetype");

This results in the following error in the browser console:

Access to Font at 'http://localhost:8080/packs/icons-16.ttf' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

I just noticed that the compiled javascript asset is also referenced as:

<script src="http://localhost:8080/packs/hello_react.js"></script>

Why is this the case? The files are in public/packs. Why doesn't the tool serve the assets from the filesystem through localhost:5000?

[gauravtiwari]

Do you have this in development.server.js?

headers: { 'Access-Control-Allow-Origin': '*' },

[btc]

It wasn't present. Just added it and the fonts are served successfully. Thank you.

Q1: Should CORS be enabled in development/included in the config by default? Is there a reason why it's not?
Q2: Should resolve-url-loader be a default loader? Seems like a common use case.

[gauravtiwari]

Q1 - Yes, it's on latest master, but not released yet.
Q2 - You wanna make a PR for that?

[btc]

Q2 - Sure. I'll have a look at the code.

[gauravtiwari]

Great, thanks. Steps -

1. Add resolve-url-loader to template.rb so it's installed as dependency.
2. Add the updated config to sass.js

// Update loaders/sass.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

[btc]

Here you go: https://github.com/rails/webpacker/pull/387

[TrungPhuNA]

good

[pengliheng]

in my mind , u should directly resolve this problem with directly import element-icons.woff file