web manifest: Line: 1, column: 1, Syntax error - reactjs

Question

I have react + webpack app
My manifest.webmanifest
{
"name": "x",
"short_name": "x",
"start_url": "./index.html",
"display": "fullscreen",
"background_color": "white",
"theme_color": "white",
"icons": [
{
"src": "favicon-16x16.png",
"type": "image/png",
"sizes": "16x16"
},
{
"src": "favicon-32x32.png",
"type": "image/png",
"sizes": "32x32"
}
]
}
Index.html
<link crossorigin="use-credentials" rel="manifest" href="manifest.webmanifest" />
I tried different combination but always get error in Chorome (at localhost):
Line: 1, column: 1, Syntax error;
In which folder should manifest.webmanifest be? (src, public, public/img ????) index.html is in src folder
What to write in href in index.html? (href="manifest.webmanifest", href="./manifest.webmanifest" ???)
What to write in 'start_url' in manifest.webmanifest?
Where to store favicon-16x16.png and favicon-32x32.png (src, public ???)
What to write in icons src in manifest.webmanifest
"icons": [
{
"src": ?????????,
"type": "image/png",
"sizes": "16x16"
},
Do I need to write something additional in the settings of Webpack?

Answer 1

I found the answer!))
The problem was that Webpack does not include manifest.webmanifest and icons img in result bundle. We need do it manually, writing the necessary paths in Webpack config:
add const CopyWebpackPlugin = require('copy-webpack-plugin'); at webpack.config.js
...
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/manifest.webmanifest'),
to: path.resolve(__dirname, 'build'),
},
{
from: path.resolve(__dirname, 'public/img/icons/'),
to: path.resolve(__dirname, 'build/icons/'),
},
],
}),
...
now all images and manifest.webmanifest are in result build folder!