title: Next.js PWA Error: Manifest: Line: 1, column: 1, Syntax error
body: <p>I am trying to create a <code>Next.js PWA</code> with <code>WebpackPwaManifest</code> and <code>NextWorkboxPlugin</code>.</p>
  <p>Whenever I start the app the <code>service worker</code> is registered but it can't find the <code>manifest.json</code>.</p>
  <p>Here is my <code>next.config.js</code> file, it contains how I generate <code>manifest</code> and <code>serviceworker</code> on each build:</p>
  <pre><code>const webpack = require('webpack')
  const path = require('path');
  const NextWorkboxPlugin = require('next-workbox-webpack-plugin');
  const WebpackPwaManifest = require('webpack-pwa-manifest');
  
  const { parsed: keys } = require('dotenv').config({
      path: './keys.env'
  })
  
  module.exports = {
      webpack(config, { isServer, buildId, dev }) {
  
           ...
         
          const workboxOptions = {
              clientsClaim: true,
              skipWaiting: true,
              globPatterns: [path.resolve('.next/static/*'), path.resolve('.next/static/commons/*')],
              modifyUrlPrefix: {
                  '.next': '_next',
              },
              runtimeCaching: [
                  {
                      urlPattern: '/',
                      handler: 'networkFirst',
                      options: {
                          cacheName: 'html-cache',
                      },
                  },
                  
                  ...
              ],
          };
  
          config.plugins.push(
              new NextWorkboxPlugin({
                  buildId,
                  ...workboxOptions,
              }),
  
              new WebpackPwaManifest({
                  name: 'appname',
                  short_name: 'shortname',
                  description: 'desc',
                  background_color: '#ffffff',
                  crossorigin: 'use-credentials',
                  inject: true,
                  start_url: &quot;/&quot;,
                  icons: [
                      {
                          src: path.resolve('./public/images/Iconlogo.svg'),
                          sizes: [96, 128, 192, 256, 384, 512],
                      },
                      {
                          src: path.resolve('./public/images/Iconlogo.svg'),
                          size: '1024x1024'
                      },
                      {
                          src: path.resolve('./public/images/Iconlogo.svg'),
                          size: '1024x1024',
                          purpose: 'maskable'
                      }
                  ]
              }));
          return config
      },
    ...
  }
  </code></pre>
  <p>So this is working as expected... generated the SW and the manifest as well.
  <a href="https://i.stack.imgur.com/zIzDz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zIzDz.png" alt="Manifest and SW Generation" /></a></p>
  <p>But when I run the app, I get this error:</p>
  <pre><code>GET http://localhost:3000/manifest.json 404 (Not Found)
  manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
  </code></pre>
  <p>I am including manifest in _document.tsx, using next.js <code>Head</code> tags:</p>
  <pre><code>export default class MyDocument extends Document {
      render() {
          return (
              &lt;Html lang=&quot;en&quot;&gt;
                  &lt;Head&gt;
                      &lt;link rel=&quot;manifest&quot; crossOrigin=&quot;use-credentials&quot; href=&quot;/manifest.json&quot; /&gt;
                  &lt;/Head&gt;
                  &lt; body &gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/Html&gt;
          )
      }
  }
  </code></pre>
  <p>Any idea? Thanks in advance.</p>