title: React production error with service worker: invalid MIME type
body: <p>I have a React app that works in development and in production, however in production I get the following error in the console:</p>
  
  <pre><code>The script has an unsupported MIME type ('text/html').
  Failed to load resource: net::ERR_INSECURE_RESPONSE
  registerServiceWorker.js:80 Error during service worker registration: 
  DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
  </code></pre>
  
  <p>The error does not happen in development, only in the production environment. The app still works correctly in production, however I would still prefer to sort out the error.</p>
  
  <p>After doing some digging, it seems that in production the <code>service-worker.js</code> file is requested from the original <code>index.html</code> file while has a MIME type of <code>text/html</code>, the <code>service-worker.js</code> file therefore does not have the correct MIME type which would need to be <code>application/javascript</code>.</p>
  
  <p>Unfortunately even though I think I understand what the issue is, I haven't been able to fix it.</p>
  
  <p>The production build was created using <code>create-react-app</code> and is served up by a <code>Django</code> backend. The <code>index.html</code> page containing the <code>React</code> app is served up as follows:</p>
  
  <pre><code>re_path('.*', TemplateView.as_view(template_name='index.html'))
  </code></pre>
  
  <p>Is there perhaps something on <code>Nginx</code> that needs changing? I would guess not since I have other production sites working correctly with respect to MIME types (however none of them are <code>React</code> apps requiring service workers).</p>