I have coded a page using webpack and integrated it into a shopify store. The site is working fine on my local server, but not on the shopify servers.

The problem is due to this part: 

  return fetch(filePath)
// Retrieve its body as ReadableStream
.then(response => response.body)
// Create a gray-scaled PNG stream out of the original
.then(rs => {
  console.log(rs)
  return rs.pipeThrough(
    new TransformStream({
      transform: async (chunk, controller) => {
        try {
          const decryptedChunk = decipher.update(chunk)
          controller.enqueue(decryptedChunk)
        } catch (err) {
          console.error(err)
        }
      }
    })
  )
})
// Create a new response out of the stream
.then(rs => new Response(rs))
// Create an object URL for the response
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
// return the URL
.then((responseURL) => { return responseURL })
.catch(console.error)

It is working fine one my local 'Windows 10' computer with shopify theme serve. Four chunks are loaded per target file. It was also working fine in the previous site version on a CentOS 7 server.

When push the page to the shopify server, the target file is not completely loaded. Only one fragmented chunk is loaded and that is all.

I have tried with Brave, Chrome, Firefox and Edge. All the same results. It seems that fetch does not download the complete file.

UPDATE: The url is computed dynamically by shopify, something like '"https://cdn.shopify.com/s/files/1/0592/8421/4512/t/1/assets/42a0ee4e462cc7ac412522343.zip"

Locally, the file is correctly loaded using a fetch, and can be downloaded directly from the browser using the provided link.

On the shopify server, the fetch is not working. When I try a direct download from the browser, it returns a 1ko file (instead of ~100ko) with the correct name.