Mini-css-extract-plugin: filename and chunkFilename functions

[aaarichter]

• Operating System:
• Node Version: 10.15.1
• NPM Version: 6.9.0
• webpack Version: 4.23.x
• mini-css-extract-plugin Version: 0.7.0 (and 0.6.0)

So I have been upgrading from version 0.2.0 step by step until 0.7.0. I noticed that in between the minor versions the filename and chunkname functionality changed or broke when replacement functions are used. Updating to the latest I see errors like

ERROR in chunk --css--ecard-touch [entry]
({
  chunk: chunkData
}) => this.options.moduleFilename(chunkData)
path.replace is not a function

Expected Behavior

No error and stable behavior of those replacer. (tbh I froze the version due to buggy behavior in between minor versions)

On such errors the call stack should be outputted too.

Actual Behavior

Errors are shown.

Code

  // webpack.config.js

      new MiniCssExtractPlugin({
        filename({ chunk }) {
          const name = chunk.name.replace(/^--css--/, '');
          return `${name}${contentHashPattern}.css`;
        },
        chunkFilename() {
          return `[name]${contentHashPattern}.css`;
        },
        allChunks: true,
      }),

How Do We Reproduce?

No idea, I just upgraded and got the error when running webpack

[alexander-akait]

No idea, I just upgraded and got the error when running webpack

Sorry without reproducible test repo we can't help

[kevinchappell]

@aaarichter filename expects a string but you can use a function with moduleFilename.

~Also in your case chunkFilename doesn't need to be a getter~ not sure where i saw a getter 🤔

[Nr9]

Same issue.

My configuration is vanilla:

new MiniCssExtractPlugin({
  filename: '[name].css',
});

But I get the following error:

ERROR in chunk print [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
path.replace is not a function

ERROR in chunk print-content [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
path.replace is not a function

ERROR in chunk print-shell [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
path.replace is not a function

ERROR in chunk spa [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
path.replace is not a function

I tried multiple configurations without any success. For the moment, I reverted to version 0.6.0.

[swarthy]

node_modules/mini-css-extract-plugin/dist/index.js:183
changing this

          result.push({
            filenameTemplate: ({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData),
            ...
          });

to this

          result.push({
            filenameTemplate: "asdfasdf",
            ...
          });

cleared buildtime error (and breaked build of course).
Looks like some code don't know about the fact that filenameTemplate may be a function.
I don't know webpack internals at all, but looks like it's a webpack/API migration issue?
Same as @Nr9, we downgraded to 0.6.0 as temporary solution.
(update)
Found issuer ;D
https://github.com/pirelenito/git-revision-webpack-plugin/pull/42

[ayxos]

I am still having this issue.
v0.6.0 -> works
v0.7.0 -> fails

...
config.base.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('./paths');

const NPMPackage = require(paths.packageJson);

const { NODE_ENV, MOCK_API_URL, INTEGRATION } = process.env;
const isProd = process.env.NODE_ENV === 'production';

const gitInfoPlugin = new GitInfoPlugin({
hashCommand: 'rev-parse --short HEAD',
});

const cssLoaders = [
isProd ? MiniCssExtractPlugin.loader : { loader: 'style' },
{
    loader: 'css',
    options: {
    sourceMap: true,
    },
},
{
    loader: 'postcss',
    options: {
    sourceMap: true,
    plugins: [autoprefixer()],
    },
},
{
    loader: 'sass',
    options: {
    sassOptions: {
        sourceMap: true,
        outputStyle: 'compact',
    },
    },
},
];

...
new MiniCssExtractPlugin({
    filename: 'styles/app.[git-hash].css',
    chunkFilename: 'styles/app.[git-hash].chunk.css',
}),

[numannaufal]

same issue here. any updates?

[alexander-akait]

Close in favor https://github.com/webpack-contrib/mini-css-extract-plugin/issues/67