Webpack5 Automatic publicPath is not supported in this browser

I was working on webpack 4.44.2, I face this error when I convert to webpack5.0.0

ERROR in ./src/assets/sass/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Automatic publicPath is not supported in this browser
at E:\maktab\Control-panel\newcontrol\final-control\node_modules\css-loader\dist\cjs.js!

the error is from the font file bath in fonts.scss

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna.woff) format("woff");
    font-weight: normal;
}

@font-face {
    font-family: "Janna LT";
    src: local("Janna LT"), url(../fonts/janna-bold.woff) format("woff");
    font-weight: bold;
}

my src structure
https://i.stack.imgur.com/vKyfW.png

dist structure
https://i.stack.imgur.com/mLgmF.png

webpack.config.js

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:  {
      'main': './src/index.js',
    },
  
    output: {
      path: path.join(__dirname, "/dist"),
      filename: '[name].js',
    }, 

    devServer: {
        contentBase: path.join(__dirname, "/dist"),
        port: 8087,
        writeToDisk: true,
        overlay :true
    },
    

    module: {
        rules: [
    
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                    }
                ]
            },

            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                MiniCssExtractPlugin.loader, 
                'css-loader', 
                'postcss-loader',
                'sass-loader'
                ]
            },
                    
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                exclude: /fonts/,
                use: [
                    {
                        loader: "file-loader", 
                        options: {
                        name: '[name].[ext]',
                        outputPath: "/assets/images",
                        }
                    }
                ]
            },

            {
                test: /\.(svg|eot|woff|woff2|ttf)$/,
                exclude: /images/,
                use: [
                    {
                        loader: "file-loader", 
                        options: {
                        name: '[name].[ext]',
                        outputPath: "assets/fonts",
                        }
                    }
                ]
            },

        ]
    },

    plugins: [
        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({ 
          filename: "index.html",
          template: "./src/index.html",
          chunks: ['main']
        }),
      

        new MiniCssExtractPlugin({filename: "assets/css/styles.css"}),
        new OptimizeCSSAssetsPlugin({}),
    ]
    
} 

styles.scss

@import "base/fonts";
@import "base/global";
@import "base/typography";
@import "base/links";
@import "components/components";
@import "components/demo";

index.js

import './assets/sass/styles.scss';
import 'normalize.css/normalize.css';

console.log("hellow from webpack5");

17 thoughts on “Webpack5 Automatic publicPath is not supported in this browser”

  1. I encountered the same issue. My code compiles into the dist-folder without any further structure. The following code works for me and is simple since I need an empty path.

    'module': {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader, 
                            options: {
                                publicPath: ''
                            }
                        },
                        {
                            loader: "css-loader"
                        }
                    ]
                }
            ]
        }
    

    You can go crazy and do things like that, too:

    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/';
            },
        },
    },
    

    Details you can find here: https://webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function

    Reply
  2. I think it will be helpful that added publicPath to the options of MiniCssExtractPlugin.loader

    reference: mini-css-extract-plugin

      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '/public/path/to/',
                },
              },
              'css-loader',
            ],
          },
        ],
      },
    
    Reply
  3. Inside your webpack.config.js you have to do as following, either to use environment variable as following or the root it will take.

    //step-1
    const ASSET_PATH = process.env.ASSET_PATH || ‘/’;

    //step-2
    Inside output object as below:
    publicPath: ASSET_PATH

    //step-3
    Inside plugins as below:
    ‘process.env.ASSET_PATH’: JSON.stringify(ASSET_PATH)

    For more info refer here,
    https://webpack.js.org/guides/public-path/

    Reply
  4. The suggested solutions didn’t work for me. However, I found that setting publicPath to an empty string did the trick.

    output: {
      publicPath: '',
      ...
    }
    
    Reply
  5. I was also getting the same error while loading images using ‘file-loader’. I was only providing the outputPath. But then I also provided publicPath both with same value and it worked.

    {
        test: /\.svg$/i,
        use: {
            loader: 'file-loader',
            options: {
                name: "[name].[ext]",
                outputPath: "imgs",
                publicPath: 'imgs',
            }
        }
      },
    

    outputPath: tells where to put images/files.
    enter image description here

    publicPath: is the path inserted into src="" of img element in html.

    <img src="imgs/webpack.svg"/>
    

    So both should have the same path.

    Reply
  6. I tried both to set the publicPath to empty and to fill with the value of outputPath. also removed mini-css-extract-plugin. But none of these worked. I
    Any suggestions?

    // Images Loader
    test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          //publicPath: '',
          publicPath: inDev ? 'images' : './main_window/images',
          outputPath: inDev ? 'images' : './main_window/images',
        },
      },
    
    Reply

Leave a Comment