Closed AlanBlanchetNeovision closed 1 year ago
You should be able to use html-webpack-plugin
as normal as I described in #413.
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
Hello devs !
My problem
I wanted to use an
index.html
file from mysrc
directory (not from thepublic
folder) which is one of the features in the html-webpack-plugin.I came up with the following solution which works.
Although I do not know how to implement it in
craco
. What I can tell you is that :html-webpack-plugin
needs the CRA paths (public path / html path) to be changed for it to work properly.html-webpack-plugin
userOptions.template
from the config for it to work.What I tried
html-webpack-plugin
manually in the craco-config. Thereact-scripts
package seams to always use the projectspublic
folder event after changing it in the plugin options.template
path from thehtml-loader
which resulted in the same error as in the logs down below. Looks likereact-scripts
isn't happy when theindex.html
file is missing in thepublic
folder.craco-html-webpack-plugin
Solutions
craco
(without having too much code like the one I sent...) and make sure that it works withreact-scripts
index.html
and/or thefavicon
for thehtml-webpack-plugin
.Some logs
Here is the output from
npm start
when I don't have the correct config and with theindex.html
file in mysrc
folderSimilar
https://github.com/dilanx/craco/issues/279
Thank you for your time.