question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

filename and chunkFilename functions

See original GitHub issue
  • 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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
Nr9commented, Jul 25, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack - output.filename impacted by output.chunkFilename?
chunkFilename setting. So having these rules: optimization: { runtimeChunk: 'single', }, output: { path: outDir, filename: '[name].js', ...
Read more >
Output - webpack
chunkFilename. string = '[id].js' function (pathData, assetInfo) => string. This option determines the name of non-initial chunk files. See output.filename ...
Read more >
Adding Hashes to Filenames - SurviveJS
According to Steve Souders, attaching the hash to the filename is the most performant option. Setting up hashing#. The build needs tweaking to...
Read more >
Output - webpack
chunkFilename. string function. This option determines the name of non-entry chunk files. See output.filename option for details on the possible values.
Read more >
长期缓存 | webpack
选项 2 is enabled by adding [chunkhash] to the chunk filename config option. --output-chunk-file [chunkhash].js output: { chunkFilename: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found