[bug]: Webpack dev server not matching production behaviour

[fooman]

Describe the bug
The dev experience should work in a similar fashion to the production environment.

To reproduce
Steps to reproduce the behavior:

1. Start with a scaffolded project
2. yarn build
3. DEBUG=hastily:*,upward* yarn start
4. curl URL of upward + image (for example curl https://fooman-pwa-frontend-gh6ov.local.pwadev:9730/venia-static/veniaClosed.png)
5. note upward output

GET /venia-static/veniaClosed.png 200 285.921 ms - 28966

6. stop serve (ctrl +c)
7. DEBUG=hastily:*,upward* yarn watch
8. Repeat 4 with dev server url

Expected behavior
the watch console should show a similar output on 4 and 8. Seeing no output would indicate the response was not provided by upward.

Overall use case that I was trying to work out was to use the image optimisation on static files that are provided in the frontend rather than hosted on the back-end.

Possible solutions
My best guess is that webpack's dev server gets prioritised on existing files before upward. As a comparison running against a proxied image file, ie using curl with a product image starting with media/catalog/product/ this will again show that the response has gone through upward.

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]:
• OS [e.g. iOS8.1, Windows 10]:
• Browser [e.g. Chrome, Safari]:
• Browser Version [e.g. 22]:
• Magento Version:
• PWA Studio Version:
• NPM version npm -v:
• Node Version node -v:

Please let us know what packages this bug is in regards to:

• venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec
• create-pwa

[m2-assistant]

Hi @fooman. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[sirugh]

Confirming this as an issue. Thanks for the repro steps @fooman.

Output from yarn start:

curl https://hmr-test-eppdb.local.pwadev:9376/venia-static/veniaClosed.png --output /dev/null

λ DEBUG=hastily:*,upward* yarn start

yarn run v1.22.4
$ buildpack serve .

 venia-sample-backends is a "development-only" extension, please remove it from your project's package.json before going to production.

  ℹ  Launching UPWARD server
[1612218119693] DEBUG (hastily:middleware/22152 on stephens-mbp.lan): creating new middleware
[1612218119695] DEBUG (hastily:middleware/22152 on stephens-mbp.lan): middleware filtering req.path for \/.+\.(jpeg|png|webp|tiff|gif|raw|jpg)(?:[?#].*)?
  upward-js:IOAdapter creating default IO from /Users/stephen/code/hmr-test/dist/upward.yml +0ms
  upward-js:IOAdapter baseDir /Users/stephen/code/hmr-test/dist +1ms
  upward-js:middleware created for path /Users/stephen/code/hmr-test/dist/upward.yml +0ms
  upward-js:middleware read upward.yml file successfully +6ms
  upward-js:middleware parsed upward.yml file successfully: { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +5ms
https://hmr-test-eppdb.local.pwadev:9376/
  ✔
     UPWARD server running.
[1612218126654] DEBUG (hastily:splice/22152 on stephens-mbp.lan): splicing hastily into response for /venia-static/veniaClosed.png
    res: {
      "statusCode": 200,
      "headers": {
        "x-powered-by": "Express"
      }
    }
[1612218126656] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.on called for "end" event
[1612218126656] DEBUG (hastily:splice/22152 on stephens-mbp.lan): 0 listeners, eventType end, calling underlying res.on
[1612218126656] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.on called for "finish" event
[1612218126656] DEBUG (hastily:splice/22152 on stephens-mbp.lan): 0 listeners, eventType finish, calling underlying res.on
  upward-js:buildResponse creating Context +0ms
  upward-js:Context generating from request: /venia-static/veniaClosed.png +0ms
  upward-js:Context url derived from host is URL {
  upward-js:Context   href: 'http://hmr-test-eppdb.local.pwadev:9376/venia-static/veniaClosed.png',
  upward-js:Context   origin: 'http://hmr-test-eppdb.local.pwadev:9376',
  upward-js:Context   protocol: 'http:',
  upward-js:Context   username: '',
  upward-js:Context   password: '',
  upward-js:Context   host: 'hmr-test-eppdb.local.pwadev:9376',
  upward-js:Context   hostname: 'hmr-test-eppdb.local.pwadev',
  upward-js:Context   port: '9376',
  upward-js:Context   pathname: '/venia-static/veniaClosed.png',
  upward-js:Context   search: '',
  upward-js:Context   searchParams: URLSearchParams {},
  upward-js:Context   hash: ''
  upward-js:Context } +0ms
  upward-js:buildResponse creating ResolverVisitor +2ms
  upward-js:buildResponse visiting for status, headers, and body +0ms
  upward-js:ResolverVisitor resolving downward: [ 'status', 'headers', 'body' ] +0ms
  upward-js:ResolverVisitor resolving upward: status from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +0ms
  upward-js:ResolverVisitor defined: veniaResponse.status is primitive, yielding to context.get("veniaResponse.status") +1ms
  upward-js:Context lookup veniaResponse.status at path veniaResponse.status +4ms
  upward-js:Context veniaResponse.status is from context base veniaResponse +0ms
  upward-js:Context veniaResponse not yet assigned, acquiring promise handle +0ms
  upward-js:Context veniaResponse has never been requested, visiting from root +0ms
  upward-js:ResolverVisitor resolving downward: [ 'veniaResponse' ] +1ms
  upward-js:ResolverVisitor resolving upward: veniaResponse from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +0ms
  upward-js:ConditionalResolver matching { matches: 'request.url.pathname', pattern: '^/(graphql|rest|media)(/|$)', use: 'veniaProxy' } with 2 left to go +0ms
  upward-js:Context lookup request.url.pathname at path request.url.pathname +2ms
  upward-js:Context request.url.pathname is from context base request +0ms
  upward-js:ContextPath traverse ["request","url","pathname"] yielded "/venia-static/veniaClosed.png" from {"url":{"host":"hmr-test-eppdb.local.pwadev:9376","hostname":"hmr-test-eppdb.local.pwadev","port":"9376","pathname":"/venia-static/veniaClosed.png","search":"","searchParams":{},"query":{}},"headers":{"host":"hmr-test-eppdb.local.pwadev:9376","user-agent":"curl/7.64.1","accept":"*/*"},"headerEntries":[{"name":"host","value":"hmr-test-eppdb.local.pwadev:9376"},{"name":"user-agent","value":"curl/7.64.1"},{"name":"accept","value":"*/*"}],"queryEntries":[]} +0ms
  upward-js:ResolverVisitor resolving upward: headers from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +1ms
  upward-js:ResolverVisitor defined: veniaResponse.headers is primitive, yielding to context.get("veniaResponse.headers") +1ms
  upward-js:Context lookup veniaResponse.headers at path veniaResponse.headers +1ms
  upward-js:Context veniaResponse.headers is from context base veniaResponse +0ms
  upward-js:Context veniaResponse not yet assigned, acquiring promise handle +0ms
  upward-js:ResolverVisitor resolving upward: body from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +0ms
  upward-js:ResolverVisitor defined: veniaResponse.body is primitive, yielding to context.get("veniaResponse.body") +0ms
  upward-js:Context lookup veniaResponse.body at path veniaResponse.body +0ms
  upward-js:Context veniaResponse.body is from context base veniaResponse +0ms
  upward-js:Context veniaResponse not yet assigned, acquiring promise handle +0ms
  upward-js:ConditionalResolver regex is /^\/(graphql|rest|media)(\/|$)/, request.url.pathname is /venia-static/veniaClosed.png +3ms
  upward-js:ConditionalResolver matching { matches: 'request.url.pathname', pattern: '^/(robots\\.txt|favicon\\.ico|manifest\\.json)', use: 'staticFromRoot' } with 1 left to go +0ms
  upward-js:Context lookup request.url.pathname at path request.url.pathname +1ms
  upward-js:Context request.url.pathname is from context base request +0ms
  upward-js:ContextPath traverse ["request","url","pathname"] yielded "/venia-static/veniaClosed.png" from {"url":{"host":"hmr-test-eppdb.local.pwadev:9376","hostname":"hmr-test-eppdb.local.pwadev","port":"9376","pathname":"/venia-static/veniaClosed.png","search":"","searchParams":{},"query":{}},"headers":{"host":"hmr-test-eppdb.local.pwadev:9376","user-agent":"curl/7.64.1","accept":"*/*"},"headerEntries":[{"name":"host","value":"hmr-test-eppdb.local.pwadev:9376"},{"name":"user-agent","value":"curl/7.64.1"},{"name":"accept","value":"*/*"}],"queryEntries":[]} +2ms
  upward-js:ConditionalResolver regex is /^\/(robots\.txt|favicon\.ico|manifest\.json)/, request.url.pathname is /venia-static/veniaClosed.png +0ms
  upward-js:ConditionalResolver matching { matches: 'fileExtension', pattern: '(js|json|png|jpg|gif|svg|ico|css|txt)', use: 'veniaStatic' } with 0 left to go +0ms
  upward-js:Context lookup fileExtension at path fileExtension +0ms
  upward-js:Context fileExtension is from context base fileExtension +1ms
  upward-js:Context fileExtension not yet assigned, acquiring promise handle +0ms
  upward-js:Context fileExtension has never been requested, visiting from root +0ms
  upward-js:ResolverVisitor resolving downward: [ 'fileExtension' ] +2ms
  upward-js:ResolverVisitor resolving upward: fileExtension from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +0ms
  upward-js:ConditionalResolver matching { matches: 'request.url.pathname', pattern: '\\.(.*)$', use: '$match.$1' } with 0 left to go +1ms
  upward-js:Context lookup request.url.pathname at path request.url.pathname +1ms
  upward-js:Context request.url.pathname is from context base request +0ms
  upward-js:ContextPath traverse ["request","url","pathname"] yielded "/venia-static/veniaClosed.png" from {"url":{"host":"hmr-test-eppdb.local.pwadev:9376","hostname":"hmr-test-eppdb.local.pwadev","port":"9376","pathname":"/venia-static/veniaClosed.png","search":"","searchParams":{},"query":{}},"headers":{"host":"hmr-test-eppdb.local.pwadev:9376","user-agent":"curl/7.64.1","accept":"*/*"},"headerEntries":[{"name":"host","value":"hmr-test-eppdb.local.pwadev:9376"},{"name":"user-agent","value":"curl/7.64.1"},{"name":"accept","value":"*/*"}],"queryEntries":[]} +2ms
  upward-js:ConditionalResolver regex is /\.(.*)$/, request.url.pathname is /venia-static/veniaClosed.png +1ms
  upward-js:ResolverVisitor resolving upward: use from { matches: 'request.url.pathname', pattern: '\\.(.*)$', use: '$match.$1' } +1ms
  upward-js:ResolverVisitor defined: $match.$1 is primitive, yielding to context.get("$match.$1") +0ms
  upward-js:Context lookup $match.$1 at path $match.$1 +0ms
  upward-js:Context $match.$1 is from context base $match +0ms
  upward-js:ContextPath traverse ["$match","$1"] yielded "png" from {"$0":".png","$1":"png"} +0ms
  upward-js:Context fileExtension assigned: 'png' +1ms
  upward-js:ContextPath traverse ["fileExtension"] yielded "png" from "png" +1ms
  upward-js:ConditionalResolver regex is /(js|json|png|jpg|gif|svg|ico|css|txt)/, fileExtension is png +1ms
  upward-js:ResolverVisitor resolving upward: use from { matches: 'fileExtension', pattern: '(js|json|png|jpg|gif|svg|ico|css|txt)', use: 'veniaStatic' } +1ms
  upward-js:ResolverVisitor defined: veniaStatic is primitive, yielding to context.get("veniaStatic") +0ms
  upward-js:Context lookup veniaStatic at path veniaStatic +0ms
  upward-js:Context veniaStatic is from context base veniaStatic +0ms
  upward-js:Context veniaStatic not yet assigned, acquiring promise handle +0ms
  upward-js:Context veniaStatic has never been requested, visiting from root +0ms
  upward-js:ResolverVisitor resolving downward: [ 'veniaStatic' ] +0ms
  upward-js:ResolverVisitor resolving upward: veniaStatic from { veniaResponse: { resolver: 'conditional', when: [ [Object], [Object], [Object] ], default: 'veniaAppShell' }, staticFromRoot: { inline: { status: 200, headers: [Object], body: [Object] } }, contentTypeFromExtension: { when: [ [Object], [Object], [Object] ], default: { inline: 'text/html' } }, fileExtension: { resolver: 'conditional', when: [ [Object] ], default: { inline: '' } }, veniaProxy: { resolver: 'proxy', target: 'env.MAGENTO_BACKEND_URL', ignoreSSLErrors: { when: [Array], default: [Object] } }, veniaAppShell: { resolver: 'inline', inline: { status: [Object], headers: [Object], body: [Object] } }, veniaStatic: { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } }, veniaTemplateIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './templates' } }, veniaStaticIncludes: { resolver: 'directory', directory: { resolver: 'inline', inline: './venia-static' } }, veniaSecurityHeaders: { resolver: 'inline', inline: { 'content-security-policy': [Object], 'strict-transport-security': [Object], 'x-content-type-options': [Object], 'x-frame-options': [Object], 'x-xss-protection': [Object] } }, status: 'veniaResponse.status', headers: 'veniaResponse.headers', body: 'veniaResponse.body' } +0ms
  upward-js:ResolverVisitor resolving upward: directory from { resolver: 'directory', directory: { resolver: 'inline', inline: '.' } } +1ms
  upward-js:InlineResolver quick-resolving primitive . +0ms
  upward-js:DirectoryResolver resolved directory . +0ms
  upward-js:DirectoryResolver creating new server for directory "." relative to "/Users/stephen/code/hmr-test/dist/upward.yml" with options { fallthrough: false, index: false, maxAge: 0 } +0ms
  upward-js:ResolverVisitor +1ms request returned a function, we are assuming it is a middleware
  upward-js:ResolverVisitor returning middleware from visitor.downward() instead of object +0ms
  upward-js:Context veniaStatic assigned to context as function: [Function: serveStatic] +3ms
  upward-js:ContextPath traverse ["veniaStatic"] yielded undefined from undefined +3ms
  upward-js:ResolverVisitor +1ms request returned a function, we are assuming it is a middleware
  upward-js:ResolverVisitor returning middleware from visitor.downward() instead of object +0ms
  upward-js:Context veniaResponse assigned to context as function: [Function: serveStatic] +1ms
  upward-js:ContextPath traverse ["veniaResponse","status"] yielded undefined from undefined +1ms
  upward-js:ContextPath traverse ["veniaResponse","headers"] yielded undefined from undefined +0ms
  upward-js:ContextPath traverse ["veniaResponse","body"] yielded undefined from undefined +0ms
  upward-js:ResolverVisitor +1ms request returned a function, we are assuming it is a middleware
  upward-js:ResolverVisitor +0ms request returned a function, we are assuming it is a middleware
  upward-js:ResolverVisitor +0ms request returned a function, we are assuming it is a middleware
  upward-js:ResolverVisitor returning middleware from visitor.downward() instead of object +0ms
  upward-js:buildResponse visitor returned request-handling middleware +13ms
  upward-js:middleware buildResponse returned function +7s
[1612218126674] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.on called for "unpipe" event
[1612218126674] DEBUG (hastily:splice/22152 on stephens-mbp.lan): 0 listeners, eventType unpipe, calling underlying res.on
[1612218126675] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.on called for "close" event
[1612218126675] DEBUG (hastily:splice/22152 on stephens-mbp.lan): 0 listeners, eventType close, calling underlying res.on
[1612218126675] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.on called for "finish" event
[1612218126675] DEBUG (hastily:splice/22152 on stephens-mbp.lan): 0 listeners, eventType finish, calling underlying res.on
[1612218126676] DEBUG (hastily:splice/22152 on stephens-mbp.lan): outgoing response.write() called with chunk of length 28966
[1612218126676] DEBUG (hastily:splice/22152 on stephens-mbp.lan): response.write(): this._header is false, calling this._implicitHeader()
[1612218126677] DEBUG (hastily:request/22152 on stephens-mbp.lan): hastily will handle this image by transforming the response through sharp
    req: "/venia-static/veniaClosed.png"
[1612218126678] DEBUG (hastily:params/22152 on stephens-mbp.lan): no format argument, returning jpeg or whatever
    req: "/venia-static/veniaClosed.png"
[1612218126679] DEBUG (hastily:params/22152 on stephens-mbp.lan): no mappers or formatters applied, doing nothing
    req: "/venia-static/veniaClosed.png"
[1612218126679] DEBUG (hastily:request/22152 on stephens-mbp.lan): mapped options and created sharp stream
    req: "/venia-static/veniaClosed.png"
[1612218126679] DEBUG (hastily:splice/22152 on stephens-mbp.lan): res.write() has no access to stream yet. calling underlying response
(node:22152) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
GET /venia-static/veniaClosed.png 200 20.488 ms - 28966

Output from yarn watch:

curl https://hmr-test-eppdb.local.pwadev:8376/venia-static/veniaClosed.png --output /dev/null

λ DEBUG=hastily:*,upward* yarn watch
yarn run v1.22.4
$ webpack-dev-server --progress --color --env.mode development

 venia-sample-backends is a "development-only" extension, please remove it from your project's package.json before going to production.

Emitting no ServiceWorker in development mode.
[1612217972333] DEBUG (hastily:middleware/22029 on stephens-mbp.lan): creating new middleware
[1612217972334] DEBUG (hastily:middleware/22029 on stephens-mbp.lan): middleware filtering req.path for \/.+\.(jpeg|png|webp|tiff|gif|raw|jpg)(?:[?#].*)?
ℹ ｢wdm｣: wait until bundle finished:
ℹ ｢wds｣: Project is running at https://hmr-test-eppdb.local.pwadev:8376/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣:    1265 modules
ℹ ｢wdm｣: Compiled successfully.

      ┌───────────────────────────────────────────────────────────────────────────────────┐
      │                                                                                   │
      │          PWADevServer ready at https://hmr-test-eppdb.local.pwadev:8376/          │
      │   GraphQL Playground ready at https://hmr-test-eppdb.local.pwadev:8376/graphiql   │
      │                                                                                   │
      └───────────────────────────────────────────────────────────────────────────────────┘

[1612218049052] DEBUG (hastily:splice/22029 on stephens-mbp.lan): splicing hastily into response for /venia-static/veniaClosed.png
    res: {
      "statusCode": 200,
      "headers": {
        "x-powered-by": "Express"
      }
    }
[1612218049055] DEBUG (hastily:splice/22029 on stephens-mbp.lan): outgoing response.end() called
[1612218049056] DEBUG (hastily:splice/22029 on stephens-mbp.lan): response.end(): this._header is false, checking content length
[1612218049056] DEBUG (hastily:splice/22029 on stephens-mbp.lan): response.end(): calling this._implicitHeader()
[1612218049060] DEBUG (hastily:request/22029 on stephens-mbp.lan): hastily will handle this image by transforming the response through sharp
    req: "/venia-static/veniaClosed.png"
[1612218049069] DEBUG (hastily:params/22029 on stephens-mbp.lan): no format argument, returning jpeg or whatever
    req: "/venia-static/veniaClosed.png"
[1612218049071] DEBUG (hastily:params/22029 on stephens-mbp.lan): no mappers or formatters applied, doing nothing
    req: "/venia-static/veniaClosed.png"
[1612218049072] DEBUG (hastily:request/22029 on stephens-mbp.lan): mapped options and created sharp stream
    req: "/venia-static/veniaClosed.png"
[1612218049074] DEBUG (hastily:splice/22029 on stephens-mbp.lan): tryImplicitHeader succeeded
[1612218049074] DEBUG (hastily:splice/22029 on stephens-mbp.lan): response.end(): stream never became available
(node:22029) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

[sirugh]

@magento export issue to Jira project PWA as Bug

[github-jira-sync-bot]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1383) is successfully created for this issue.