mini-css-extract-plugin: module.generator.asset.publicPath='/' throw error

Bug report

{
    module: {
      // mini-css-extract-plugin HookWebpackError: Invalid URL: /assets/logo.635a60f2.jpg
      generator: {
        asset: {
          publicPath: '/',
        },
      },
    },
   output:{
        publicPath:'auto'
   }
}

Actual Behavior

Expected Behavior

How Do We Reproduce?

{
    module: {
      generator: {
        asset: {
          publicPath: '/',
        },
      },
    },
   output:{
        publicPath:'auto'
   }
}

<!-- A great way to do this is to provide your configuration via a GitHub repository -->
<!-- The most helpful is a minimal reproduction with instructions on how to reproduce -->
<!-- Repositories with too many files or large `webpack.config.js` files are not suitable -->
<!-- Please only add small code snippets directly into this issue -->
<!-- https://gist.github.com is a good place for longer code snippets -->
<!-- If your issue is caused by a plugin or loader, please create an issue on the loader/plugin repository instead -->

### Please paste the results of `npx webpack-cli info` here, and mention other relevant information

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 32 (19 by maintainers)

Most upvoted comments

I have to chime in to say the loss of support for publicPath on the extract plugin causes an incompatibility when importing the same file from both CSS and JavaScript. For example, for a file hosted at /fonts/font.woff, let’s say you import font.woff from inside a CSS file, and then inside a JavaScript file. The lost publicPath support means it’s impossible for the JavaScript output and the CSS output to resolve the same public path correctly. Trying to use different asset/resource configurations (one for CSS and one for JavaScript issuers) also doesn’t work as webpack won’t duplicate the imported font file.

With `publicPath` set to “/fonts/”

import font from "./font.woff";
// font = /fonts/font.woff ✅

@font-face {
  font-family: font;
  src: url("./font.woff") format("woff"); /*** 💥 throws Invalid URL ***/
}

When `publicPath` not set

import font from "./font.woff";
// font = /font.woff ❌

@font-face {
  font-family: font;
  src: url("./font.woff") format("woff");  /*** ❌ resolves to "/font.woff" ***/
}

When `publicPath` not set on generator, but set to"/fonts/" on the loader plugin options itself

import font from "./font.woff";
// font = /font.woff ❌

@font-face {
  font-family: font;
  src: url("./font.woff") format("woff"); /*** ✅ resolves to "/fonts/font.woff" ***/
}

samkelleher on Jan 5, 2022

I have the same problem. How to solve it

ccy303 on Dec 23, 2021

should work with https://github.com/webpack/webpack/discussions/15613

vankop on Apr 1, 2022

publicPath: ‘//cdn.example.com/assets/’,

hm… with one leading slash works fine…

vankop on Apr 2, 2022

There is solution https://github.com/webpack-contrib/mini-css-extract-plugin/pull/915

alexander-akait on Mar 1, 2022

@ckken You should not use generator in your case, just set

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    publicPath: '/'
  }
},

Why? Because you can’t combine auto and /, webpack can’t understand how to calculate valid URL

alexander-akait on Dec 15, 2021

Maybe my example from here helps, as it seems the same issue: https://github.com/webpack/webpack/discussions/14920

The repo: https://github.com/ldrick/webpack_asset_resource

ldrick on Dec 9, 2021