Adapt HtmlWebpackPlugin to Craco

[AlanBlanchetNeovision]

Hello devs !

My problem

I wanted to use an index.html file from my src directory (not from the public folder) which is one of the features in the html-webpack-plugin.

I came up with the following solution which works.

const {getPlugin} = require("../../src/lib/webpack-plugins")

module.exports = {
    webpack: {
        configure: (c) => {
            // Change html-webpack-plugin's template path
            const htmlWebpackPlugin = getPlugin("HtmlWebpackPlugin");
            if (htmlWebpackPlugin) htmlWebpackPlugin.userOptions.template = path.resolve(__dirname, 'src/index.html');
            return c.resolve?.extensions?.push('.png', '.jpg', '.jpeg'), c;
        }
    },
    plugins: [
        {
            plugin: {
              overrideWebpackConfig: ({ webpackConfig, context: {  paths } }) => {
                // Change the CRA public path / html file path
                paths.appPublic = path.resolve(__dirname, 'src');
                paths.appHtml = path.resolve(__dirname, 'src/index.html');
                return webpackConfig;
              }
            },
          },
    ]
};

Although I do not know how to implement it in craco. What I can tell you is that :

• The html-webpack-plugin needs the CRA paths (public path / html path) to be changed for it to work properly.
• You need to override the html-webpack-plugin userOptions.template from the config for it to work.

What I tried

• Adding html-webpack-plugin manually in the craco-config. The react-scripts package seams to always use the projects public folder event after changing it in the plugin options.
• Just changing the template path from the html-loader which resulted in the same error as in the logs down below. Looks like react-scripts isn't happy when the index.html file is missing in the public folder.
• Using the craco-html-webpack-plugin

Solutions

• Find a way to change CRA paths easily
• Ability to change plugins options directly from craco (without having too much code like the one I sent...) and make sure that it works with react-scripts
• Create an options somewhere in the config to reference the index.html and/or the favicon for the html-webpack-plugin.

Some logs

Here is the output from npm start when I don't have the correct config and with the index.html file in my src folder

> env-cmd --verbose -e common,dev craco start --verbose

Options: {"command":"craco","commandArgs":["start","--verbose"],"rc":{"environments":["common","dev"]},"options":{"expandEnvs":false,"noOverride":false,"silent":false,"useShell":false,"verbose":true}}
Found environments: [common,dev] for default .rc file at path: ./.env-cmdrc.json
Project root path resolved to:  /home/alan/dev/apv11_frontend
Override started with arguments:  [
  '/home/alan/.nvm/versions/node/v16.14.2/bin/node',
  '/home/alan/dev/apv11_frontend/node_modules/@craco/craco/dist/scripts/start.js',
  '--verbose'
]
For environment:  development
Config file path resolved to:  /home/alan/dev/apv11_frontend/craco.config.ts
Overrided craco config with plugin.
Overrided craco config with plugin.
Applied craco config plugins.
Found Webpack dev config at:  /home/alan/dev/apv11_frontend/node_modules/react-scripts/config/webpack.config.js
Overrided ESLint config to enable an ignore file.
Applied CSS loaders options.
Overrided CSS loader.
Applied CSS loaders options.
Overrided CSS loader.
Applied CSS loaders options.
Overrided CSS loader.
Applied CSS loaders options.
Overrided CSS loader.
Overrided PostCSS loader.
Overrided PostCSS loader.
Overrided PostCSS loader.
Overrided PostCSS loader.
Merged webpack config with 'webpack.configure'.
Overrided webpack config with plugin.
Applied webpack config plugins.
Overrided require cache for module: /home/alan/dev/apv11_frontend/node_modules/react-scripts/config/webpack.config.js
Overrided Webpack dev config.
Found dev server config at:  /home/alan/dev/apv11_frontend/node_modules/react-scripts/config/webpackDevServer.config.js
Overrided require cache for module: /home/alan/dev/apv11_frontend/node_modules/react-scripts/config/webpackDevServer.config.js
Overrided dev server config provider.
Starting CRA at:  /home/alan/dev/apv11_frontend/node_modules/react-scripts/scripts/start.js
Could not find a required file.
  Name: index.html
  Searched in: /home/alan/dev/apv11_frontend/public
Child process exited with code: 1 and signal:. Terminating parent process...

Similar

https://github.com/dilanx/craco/issues/279

Thank you for your time.