Search code examples
reactjswebpackcreate-react-appprogressive-web-apps

How to configure manifest.json with create react app and webpack


I am working on react-boilerplate. And I also have configured webpack with but after integrating webpack I am getting error which is related to manifest.json.

Manifest: Line: 1, column: 1, Unexpected token.

To fix this, I am using webpack-pwa-manifest and configured webpack.config.js https://github.com/arthurbergmz/webpack-pwa-manifest

const manifest = new WebpackPwaManifest({
  name: 'React Starter Kit',
  short_name: 'React Starter Kit',
  description: 'React Starter Kit',
  background_color: '#ffffff',
  start_url: '/',
  scope: '/',
  theme_color: "#3367D6",
  icons: [
    {
      src: path.resolve('public/images/icons/icon-512x512.png'),
      sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
    },
    {
      src: path.resolve('public/images/icons/icon-512x512.png'),
      size: '1024x1024' // you can also use the specifications pattern
    }
  ]
})

looking ideal way to handle this error.


Solution

  • Are you using HtmlWebpackPlugin as well? Manifest should be injected automatically, make sure you don't have any manually added manifest link in your html template.