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.scssModule build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):Error: Automatic publicPath is not supported in this browserat 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 structurehttps://i.stack.imgur.com/vKyfW.png
dist structurehttps://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");Best Answer
The suggested solutions didn't work for me. However, I found that setting publicPath to an empty string did the trick.
output: {publicPath: '',...}The error message 'automatic publicpath is not supported in this browser' indicates that the browser you are using does not support this feature. This can have implications for the functionality of your website, as the automatic publicpath is a crucial aspect of modern web development.
The automatic publicpath refers to the process of automatically determining the path for loading static assets, such as JavaScript and CSS files, in your web application. It allows for dynamic resolution of the correct path based on the current environment and configuration.
When this feature is not supported in a browser, it means that the path for loading these assets needs to be manually specified, which can be a cumbersome and error-prone task. Without the correct publicpath, your website may not load these assets correctly, leading to broken functionality and a poor user experience.
To address this issue, you need to find alternative solutions to ensure proper browser compatibility. One approach is to use a tool like webpack, which allows you to configure the publicpath manually and generate the correct paths for your assets. Another option is to use a CDN (Content Delivery Network) to host your static assets, as they often provide automatic path resolution.
It is important to test your website on different browsers and ensure that the automatic publicpath is supported. By doing so, you can provide a seamless experience for all users, regardless of their browser choice.
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.
you can try this way:
//add output.publicpathoutput: {publicPath: '/',...}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-1const ASSET_PATH = process.env.ASSET_PATH || '/';
//step-2Inside output object as below:publicPath: ASSET_PATH
//step-3Inside 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.