esModules: true outputs url([object Module]) instead of url(base64String) for inline local fonts?

[ganapativs]

• Operating System: MacOS catalina
• Node Version: 12.14.0
• NPM Version: 6.13.4
• webpack Version: 4.41.2
• url-loader Version: 3.0.0

Expected Behavior

Should convert inline local fonts to base64 and output the bundle.

Eg:

src: local('Poppins Regular'), local('Poppins-Regular'), url(data:font/woff2;base64,...) format('woff2');

Actual Behavior

Generates buggy output code(Note url([object Module]) here)!
src: local('Poppins Regular'), local('Poppins-Regular'), url([object Module]) format('woff2');

Setting esModule: false works as expected for now. But, is this the expected behaviour?

Code

// webpack.config.js
config.module.rules.push({
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 100000,
            name: '[name].[ext]'
        },
    },
});

How Do We Reproduce?

Repro #201 (comment)

Load any font face with local fonts and bundle it with url-loader.

eg:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular'), url("./files/latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[alexander-akait]

Update css-loader to latest version

[thomas-darling]

@evilebottnawi
This is still broken in the latest release - we're seeing it with url-loader 3.0.0 and css-loader 3.4.2 - also, what exactly does css-loader have to do with this?

Please reopen and fix :-)

[alexander-akait]

No, it is not broken and tested, please update deps

[alexander-akait]

Here line https://github.com/webpack-contrib/css-loader/blob/master/src/runtime/getUrl.js#L8 for handling export default

[ganapativs]

@thomas-darling I had to set esModule: false in 3.0.0 to make it work.

{
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 100000,
            name: '[name].[ext]',
            // Introduced in v3, removes inline font files if enabled 🤷‍♂️
            esModule: false,
        },
    },
}

But, I'm not sure if this is the right way.

[alexander-akait]

I do not recommend disable that, because it is increase bundle size and tree shaking doesn't work

[alexander-akait]

Double check your version, refresh lock file

[alexander-akait]

Do not forget about you need update file-loader to latest version too

[thomas-darling]

@evilebottnawi
file-loader is the latest too, at 5.0.2, and I did double check versions, delete lock file and reinstall all dependencies. The only thing that works, is disabling the esModule option.

This bug is most definitely still alive 🐛

[thomas-darling]

Here line https://github.com/webpack-contrib/css-loader/blob/master/src/runtime/getUrl.js#L8 for handling export default

There you are linking to that css-loader again - but this bug is in url-loader

[alexander-akait]

@thomas-darling Where is bug? Please provide reproducible test repo

[thomas-darling]

I don’t know where the bug is, but it is most definitely there, as already described above.

And sorry, I won’t waste time setting up a test repo to prove this - it’s an obvious regression.

[alexander-akait]

@thomas-darling

And sorry, I won’t waste time setting up a test repo to prove this - it’s an obvious regression.

It sounds insulting, I spend my time to help you, but you don’t want to help me and claim a problem without even showing it. Obvious? No, it is not obvious because I can’t find out where it happens. What loaders you have? What plugins you have? What code you have? Maybe mistake in your code? Or maybe mistake in other dependencies. I don't known.

[thomas-darling]

(deleted as this comment was based on a misunderstanding)

[alexander-akait]

@thomas-darling Seriously? I asked you to provide more information:

• esModules: true outputs url([object Module]) instead of url(base64String) for inline local fonts? #201 (comment)
• esModules: true outputs url([object Module]) instead of url(base64String) for inline local fonts? #201 (comment)

And before that I gave recommendations on how to fix the problem and potentially problem places.

Where my tone was irritable or rude to you? It is you are rude to me right now. I am providing assistance to hundreds of people and just asking to help me with this by providing more information instead the charges. I closed the issue because I added tests and the values were expected. What have you done? #201 (comment) - you came and demanded to fix the problem without providing any information, I'm sorry I do not own telekinesis and can not find out your configuration and the code on another part of the planet. Don't you think is a little unprofessional?

Now you are directly violating developers Code of Conduct, but I continue to talk with you because I want to find a problem and fix it. I ask you to stop being emotional, since we are not in a kindergarten, I will help you find the problem and fix it if it is in our code. It will not take you more than 5-10 minutes to make an example; writing messages about what are all bad takes longer.

[thomas-darling]

Ok, I actually do owe you an apology here. Your comments about css-loader did actually make sense in context of fonts not being loaded correctly when specified in a css file. In our case it actually looks like the images that are breaking are in the views of a React app, so there may be some differences here.

I won't have time to debug this further right now, but I'll get back to you if/when we know more.

[alexander-akait]

@thomas-darling Thank you, I hope for understanding, just ping me when you have an example or more information

[alexander-akait]

/cc @ganapativs Original problem still exists? If yes can you provide configuration or example?

[alexander-akait]

@thomas-darling

the images that are breaking are in the views of a React app, so there may be some differences here

Do you use require or import in code? Or maybe you use require.context?

[ganapativs]

@evilebottnawi Here is a repro for the issue.

https://codesandbox.io/s/winter-fire-qwym7
The CSS file to look out for is https://qwym7.sse.codesandbox.io/_next/static/css/styles.chunk.css

This repro uses next.js with @zeit/next-css package. I'm trying to inline font file(Poppins) using url-loader and apply the font family to the body.

Currently, esModule: false is set in next.config.js. The font is inlined and is applied to the body.

Now set esModule: true in next.config.js and wait for it to compile. The font is not inlined anymore(reload and check the above CSS file) resulting in the font not being applied.

In this case, the CSS file has url([object Module]) in it.

src: local("Poppins Regular"), local("Poppins-Regular"),
    url([object Module]) format("woff2");

Am I missing something here or is it a bug?

[alexander-akait]

@ganapativs Please open issue in @zeit/next-css, they use css-loader@1.0.0", it is deprecated and unsupported and very buggy

[ganapativs]

I did check the @zeit/next-css css-loader version earlier. Forgot to mention 😅

Apparently, they have decided not to upgrade the @zeit/next-css package anymore as they have added the native CSS support in next.js.

Thanks for your time 👍