Error producing assets

[edsonv]

Hi there. Recently I have upgraded to the last version available of the package but haven been able to produce the same output as before and need some advice.

Expected behaviour

To produce the correct critical css assets in the right folder

Current behaviour

98% after emitting CriticalCssWebpackPlugin[webpack-cli] Error: Error: file "./css/index.2932b7134b2d62c74a16.css" not found in "build". Specify base path.
    at 
/node_modules/inline-critical/index.js:175:17
    at Array.map (<anonymous>)
    at inline (/node_modules/inline-critical/index.js:158:11)
    at create (/node_modules/critical/src/core.js:222:21)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.generate (/node_modules/critical/index.js:23:20)

Configuration and usage

Below is the function to configure the plugin:

const configureCriticalCss = () => {
  return settings.criticalCssConfig.pages.map((row) => { // rows are object elements in an array containing urls and templates
    const criticalSrc = settings.urls.critical + row.url;  // And urls are html files like index.html
    const criticalDest = 
      settings.criticalCssConfig.base +
      row.template + // templates are strings of the type ***index***
      settings.criticalCssConfig.suffix;
    let criticalWidth = settings.criticalCssConfig.criticalWidth;
    let criticalHeight = settings.criticalCssConfig.criticalHeight;
    // Handle Google AMP templates
    if (row.template.indexOf(settings.criticalCssConfig.ampPrefix) !== -1) {
      criticalWidth = settings.criticalCssConfig.ampCriticalWidth;
      criticalHeight = settings.criticalCssConfig.ampCriticalHeight;
    }
    console.log('source: ' + criticalSrc + ' target: ' + criticalDest);
    return new CriticalCssPlugin({
      base: './build', //just ./ was defined earlier. Now, this is the output webpack folder
      src: criticalSrc,
      target: criticalDest, //target key has been changed from dest key
      extract: true,
      inline: true,
      // minify: true, Deprecated 
      width: criticalWidth,
      height: criticalHeight,
      penthouse: {
        timeout: 100000
      }
    });
  });
};

And here is how we use the plugin:

plugins: [
    new CleanWebpackPlugin(settings.paths.dist.clean, configureCleanWebpack()),
    new MiniCssExtractPlugin({
      path: path.resolve(__dirname, settings.paths.dist.base),
      filename: path.join('css', '[name].[contenthash].css'),
    }),
    new PurgecssPlugin(configurePurgeCss()),
    new WebappWebpackPlugin(configureWebapp()),
    new CreateSymlinkPlugin(settings.createSymlinkConfig, true),
    // new WorkboxPlugin.GenerateSW(configureWorkbox())
  ].concat(configureHtmlWebpackPlugin(), configureCriticalCss())

[lili21]

hum. look like the base option is not correct. You can ignore the option, and the plugin will read the webpack config automatically.

if that does not help. Could you provide a minimal, reproducible example?