Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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");
–
–
The suggested solutions didn't work for me. However, I found that setting publicPath to an empty string did the trick.
output: {
publicPath: '',
–
–
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
–
The error is caused by a bug in mini-css-extract-plugin 1.3.8 and lower in combination with Webpack 5. It is triggered when a stylesheet references a resource using url(...) and the publicPath option is not set explicitly in the Webpack configuration.
I took the time to reproduce and report the issue here: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707
Yesterday, version 1.3.9 has been released and it includes the fix for this issue. You should be able to resolve this error by upgrading.
–
–
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/
–
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',
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.
publicPath: is the path inserted into src="" of img element in html.
<img src="imgs/webpack.svg"/>
So both should have the same path.
pay attention to the tag of <script> in index.html,which type is default but not is module
Works
<script src="./build/bundle.js"></script>
Creates Error
<script type="module" src="./build/bundle.js"></script>
I'm distributing a React app with a script tag only on 3rd party sites, so I'm using style-loader, and not emitting a separate CSS file.
The way I fixed this issue was defining an output.publicPath in the production webpack configuration and upgrading to the latest webpack version.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
