Webpack5 Automatic publicPath is not supported in this browser
Solution 1
The suggested solutions didn't work for me. However, I found that setting publicPath
to an empty string did the trick.
output: {
publicPath: '',
...
}
Solution 2
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
Solution 3
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.
Solution 4
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/
Solution 5
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',
],
},
],
},
entesar
Updated on April 09, 2021Comments
-
entesar about 3 years
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");