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...

Thank you for your time.

Here is my craco config file export :

module.exports = {
  style: {
    css: {
      loaderOptions: {
        url: false,
      },
    },
  },
  plugins: [
    {
      plugin: CracoAliasPlugin,
    },
  ],
  webpack: {
    plugins: {
      add: [
        new HtmlWebpackPlugin({
          filename: path.resolve(__dirname, 'src/index.html'),
        }),
      ],
    },
    configure: (c: Configuration) => {
      return c.resolve?.extensions?.push('.png', '.jpg', '.jpeg'), c;
    },
  }
};

This is supposed to use the index.html template located in 'src', but it will actually look in the 'public' folder as specified in error in the console :

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:  [
  '/usr/bin/node',
  '/home/alan/dev/apv11_frontend/node_modules/@craco/craco/dist/scripts/start.js',
  '--verbose'
]
For environment:  development
components/* components/$1
interfaces/* interfaces/$1
utils/* utils/$1
scss/* scss/$1
fonts/* fonts/$1
assets/* assets/$1
Config file path resolved to:  /home/alan/dev/apv11_frontend/craco.config.ts
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.
Added webpack plugins.
Merged webpack config with 'webpack.configure'.
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...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lockeo-detection@0.1.0 start: `env-cmd --verbose -e common,dev craco start --verbose`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the lockeo-detection@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/alan/.npm/_logs/2022-10-03T08_15_49_285Z-debug.log

"Could not find a required file. Name: index.html Searched in: /home/alan/dev/apv11_frontend/public"

Thank you

dilanx / craco

CRA5: Adapt HtmlWebpackPlugin to Craco #441

My problem

What I tried

Solutions

Some logs

Similar