1

I'm using react-scripts 4.0.3 and react-app-rewired 2.1.6 to make some adjustments to the webpack config.

I want to alter some attributes of the script tags that are generated and injected into index.html. I'm using alterAssetTags hook of the HtmlWebpackPlugin.

class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', compilation => {
      console.log('compilation'); // <- this is executed
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tap('MyPlugin', data => {
         console.log('adjust tags'); // <- not executed
      });
    });
  }
}

This is my config-overrides.js:

const { override, addWebpackPlugin, babelInclude } = require("customize-cra");

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      addWebpackPlugin(new MyPlugin()),
      babelInclude([
        path.resolve('src'), // don't forget this
      ])
    )(config, env)
  );
};

Problem

The problem is, that alterAssetTags is not called during the build process (but the compilation hook is).

However, if I replace the existing HtmlWebpackPlugin of create-react-app, everything works as expected.

const htmlWebpackPluginIndex = config.plugins.findIndex(plugin => plugin.constructor.name === 'HtmlWebpackPlugin');
const newHtmlWebpackPlugin = new HtmlWebpackPlugin({
   ...config.plugins[htmlWebpackPluginIndex].options,
 });
// Replace the original HtmlWebpackPlugin with the new instance
config.plugins.splice(htmlWebpackPluginIndex, 1, newHtmlWebpackPlugin);
config.plugins.push(new MyPlugin());

This is not a solution though, because the generated index.html differs.

Question

What could be the issue, that alterAssetTags is not called?

hendra
  • 2,531
  • 5
  • 22
  • 34
  • You can try to use new modern html-bundler-webpack-plugin. This plugin allow to define source script/style files directly in HTML template, so you can self specify needed tag attributes. – biodiscus Mar 22 '23 at 21:44

0 Answers0