Why are my prefetched scripts not being used? (webpack)

Question

I'm trying to prefetch scripts so that I can render (prefetched) React components the user will navigate to faster. My scripts are being prefetched but they don't seem to be used. When I go to another page (e.g. Look), the Look bundle is fetched again and the prefetched bundle is not being used at all.

I've posted two screenshots of the headers of each request.The prefetch request has a different Accept value in its header (requests made by webpack). The Cookie value also differs, I believe this is something Google Analytics related but I don't think this is the issue.

Whilst typing this I've noticed the Preview/Response tab in Chrome says "Failed to load response data" (see first screenshot) so I checked Firefox and there the responses are both the same but I'm guessing this might be an indicator of what's wrong.

TL;DR: Why are my prefetched scripts not being used?

I'm using @loadable/component for prefetching components, example code:

import loadable from '@loadable/component';
import React from 'react';

const LoadableComponent = loadable(
  () =>
    import(
      /* webpackChunkName: "Look", webpackPrefetch: true */
      '../containers/Look'
    ),
  {
    fallback: <div />,
  },
);

const LookLoadable = () => <LoadableComponent />;

export default LookLoadable;