publicPath not doing anything #403

HoldYourWaffle · 2019-05-25T13:10:00Z

This might be related to #222.

Operating System: Windows 10
Node Version: v10.12.0
NPM Version: v6.9.0
webpack Version: v4.32.2
mini-css-extract-plugin Version: v0.6.0

Expected Behavior

publicPath should overwrite the output directory specified in output.path

Actual Behavior

Using publicPath doesn't seem to do anything. If it's defined as a function it does get called, but the return value is never used.

Code

module: {
	rules: [
		{
			test: /\.tsx?$/,
			use: 'ts-loader',
			exclude: /node_modules/
		},
		
		{
			test: /\.s?css$/,
			use: [
				{
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: 'any/path/absolute/or/relative'
					}
				},
				'css-loader'
			]
		}
	]
}

Full config

How Do We Reproduce?

By using the configuration above.

The text was updated successfully, but these errors were encountered:

alexander-akait · 2019-05-27T09:55:40Z

Please create minimum reproducible test repo, i think you have invalid configuration

Noitidart · 2019-07-13T02:32:07Z

I also have this issue my code is here:

{
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map',
    entry: './assets/js/index.js',
    output:
    {
        filename: 'index.bundle.js',
        path: path.resolve(__dirname, '../.tmp/public/js'),
        publicPath: '/js/'
    },
    plugins: [
        new MiniCssExtractPlugin(
        {
            filename: 'main.bundle.css'
        }),
    ],
    module:
    {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules|dependencies/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
            {
                loader: MiniCssExtractPlugin.loader
                options:
                {
                    publicPath: '/css/'
                }
            }, 'css-loader']
        },
        {
            test: /\.less$/,
            exclude: /node_modules/,
            use: [
            {
                loader: MiniCssExtractPlugin.loader
                options:
                {
                    publicPath: '/css/'
                }
            }, 'css-loader', 'less-loader']
        }]
    }
},

Any advice would be awesome.

bohdan-basov · 2019-07-25T08:18:45Z

Have the same issue! When file-loader has specified puplicPath option, publicPath in MiniCssExtractPlugin.loader does nothing, when I remove file-loader's publicPath everything works fine

alexander-akait · 2019-07-25T08:20:38Z

Please create minimum reproducible test repo

TheBoroer · 2019-09-07T19:58:42Z

I just had the same problem and found a fix when I came across this comment

The readme says Options similar to the same options in webpackOptions.output which makes us believe we can have similar options (path, publicPath, etc.)....which is WRONG.

To get it to work, just add the relative path in the filename option like this:

new MiniCssExtractPlugin({
    filename: 'frontend/public/css/bundle.css'
}),

and make sure your webpack output options's path is set to this (i included publicPath and filename for completeness):

output: {
    path: path.join(__dirname),
    filename: 'bundle.js',
    publicPath: 'frontend/public/js/',
},

publicPath in MiniCssExtractPlugin options is still ignored....but at least this is a working workaround for now.

Noitidart · 2019-09-07T20:22:54Z

Thank you! I will try and let you know how it goes!

…

On Sat, Sep 7, 2019 at 12:58 PM Boro Vukovic ***@***.***> wrote: I just had the same problem and found a fix when I came across this comment <#137 (comment)> The readme says Options similar to the same options in webpackOptions.output which makes us believe we can have similar options (path, publicPath, etc.)....which is WRONG. To get it to work, just add the relative path in the filenam option like this: new MiniCssExtractPlugin({ filename: 'public/css/main.bundle.css' }), — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#403?email_source=notifications&email_token=ABQTZCNJSXPDSVR6TD4UGHLQIQBXPA5CNFSM4HPUSUF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6FBFGA#issuecomment-529142424>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQTZCPY34Q4AYMTU3XZ7LDQIQBXPANCNFSM4HPUSUFQ> .

bitfella · 2019-09-19T10:52:53Z

Any update on this? publicPath is useless right now. It is executed, but its value is never used. If it is supposed to be used in a different way, please update docs with a clear example about its usage. Thanks.

iDenisM · 2019-09-19T12:00:36Z

Also trying to use 'publicPath' but it doesn't work right now

mbejda · 2019-09-25T14:36:23Z

Not working for me either.

tylerrrkd · 2019-09-29T02:26:58Z

My version is 0.8.0 and it's the latest one. Doc mini-css-extract-plugin shows that publicPath property, but it doesn't work for me either.

Configuration here.

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    publicPath: '../../',
    // only enable hot in development
    hmr: mode === MODE_TYPE.DEV,
    // if hmr does not work, this is a forceful method.
    reloadAll: true,
  },
}

tylerrrkd · 2019-09-29T07:28:50Z

Ooops, my problem was solved accidentally... I found that my router missing a property named path (works like ouput.publicPath I think). After then, I try to change the value of loaders.options.publicPath and it works!

Noitidart · 2019-09-29T13:29:10Z

Wow that's interesting, thanks for sharing. I still couldn't get it to work.

…

On Sun, Sep 29, 2019 at 12:28 AM Kaida Lin ***@***.***> wrote: Ooops, my problem was solved accidentally... I found that my router missing a property named path (works like ouput.publicPath I think). After then, I try to change the value of loaders.options.publicPath and it works! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#403?email_source=notifications&email_token=ABQTZCNHQD52HC2ET3DFCSDQMBKLNA5CNFSM4HPUSUF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD73LKZI#issuecomment-536261989>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQTZCIJI7XBNILPENIYNDDQMBKLNANCNFSM4HPUSUFQ> .

alessiofachechi · 2019-10-01T23:26:39Z

Despite I landed here for the same reason described by @HoldYourWaffle, now that I've better read the docs of both MiniCssExtractPlugin and webpack.output I think that there's a misunderstanding about the expected behavior of the plugin's publicPath option.

What we're currently expecting from the publicPath option is what in the case of webpack.output is done by path. But webpack.output allows for publicPath too. According to the docs the former is the output directory as an absolute path, while the latter specifies the public URL of the output directory when referenced in a browser.

In a few words what we wanted here is path, not publicPath. And the path behavior can be achieved through the plugin filename option, as already said in some comments above.

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new MiniCssExtractPlugin({
      // path relative to the output.path
      // e.g. assets/style/main.css => dist/assets/style/main.css
      filename: 'assets/style/[name].css',
    })
  ],

woutrbe · 2019-10-20T08:41:53Z

Thanks for the explanation @alessiofachechi, it took my quite a while to figure this out.
The documentation actually says // Options similar to the same options in webpackOptions.output, however it looks like path isn't supported. Using filename to also set the output directory isn't very clear.

Hopefully someone can update the documentation with an example.

vsylvestre · 2019-10-23T14:23:57Z

But wouldn't it be useful to have publicPath as well? I mean having the same behaviour as for webpack.output.publicPath.

mykt0ngc0 · 2020-03-10T12:13:31Z

These are the workarounds: 👇

alexander-akait · 2020-08-19T15:28:23Z

It is not bug, it is misleading, publicPath setup publicPath inside CSS (for url/etc), not for extracted file in runtime generated code, here example how you can achieve original request #403 (comment), I will update docs

cap-Bernardito mentioned this issue Oct 9, 2020

Docs: improved readme #603

Merged

6 tasks

alexander-akait closed this as completed in #603 Oct 9, 2020

Uh oh!

publicPath not doing anything #403

publicPath not doing anything #403

Comments

HoldYourWaffle commented May 25, 2019

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

alexander-akait commented May 27, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Noitidart commented Jul 13, 2019

Uh oh!

bohdan-basov commented Jul 25, 2019

Uh oh!

alexander-akait commented Jul 25, 2019

Uh oh!

TheBoroer commented Sep 7, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Noitidart commented Sep 7, 2019 via email

Uh oh!

bitfella commented Sep 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iDenisM commented Sep 19, 2019

Uh oh!

mbejda commented Sep 25, 2019

Uh oh!

tylerrrkd commented Sep 29, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tylerrrkd commented Sep 29, 2019

Uh oh!

Noitidart commented Sep 29, 2019 via email

Uh oh!

alessiofachechi commented Oct 1, 2019

Uh oh!

woutrbe commented Oct 20, 2019

Uh oh!

vsylvestre commented Oct 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mykt0ngc0 commented Mar 10, 2020

Uh oh!

alexander-akait commented Aug 19, 2020

Uh oh!

alexander-akait commented May 27, 2019 •

edited

Loading

TheBoroer commented Sep 7, 2019 •

edited

Loading

bitfella commented Sep 19, 2019 •

edited

Loading

tylerrrkd commented Sep 29, 2019 •

edited

Loading

vsylvestre commented Oct 23, 2019 •

edited

Loading