HMR bug? Shared dependencies can get duplicated on update

[rixo]

In a fresh minimal CSA app, with a file layout like this:

• index.js
• a.js
• b.js
• transitive.js

Dependencies like such:

• index imports a and b
• a imports transitive
• b imports transitive

If I have an accept handler in index, and change transitive, then every module gets reloaded once, and I get what I expect.

However, if the accept handlers are in a and b (e.g. situation I would get if a and b were Svelte components), and a change happens in transitive (not accepted), then transitive is reloaded twice. a and b each get a different copy, which can easily lead to a broken app, because modules are expected to be unique.

My expectation would be that the transitive module gets reloaded, but only once, and a and b would get the same copy of their shared dependency.

Is my expectation correct? Should we attempt to fix this? (Any pointer?)

Example reproduction

Snowpack version: 2.18.4

index.js

import a from './a.js'
import b from './b.js'

a.subscribe(({ value }) => {
  console.log('a is', value)
})

b.subscribe(({ value }) => {
  console.log('b is', value)
})

if (import.meta.hot) {
  import.meta.hot.accept()
}

a.js

import transitive from './transitive.js'

let _callback

const a = {
  value: 'a-' + transitive,
  subscribe: fn => {
    _callback = fn
    fn(a)
  }
}

export default a

if (import.meta.hot) {
  import.meta.hot.accept(({ module }) => {
    a.value = module.default.value
    _callback(a)
  })
}

b.js

import transitive from './transitive.js'

let _callback

const b = {
  value: 'b-' + transitive,
  subscribe: fn => {
    _callback = fn
    fn(b)
  }
}

export default b

if (import.meta.hot) {
  import.meta.hot.accept(({ module }) => {
    b.value = module.default.value
    _callback(b)
  })
}

transitive.js

export default Math.random()

Steps

• open the page

• see expected output in the console:

a is a-XXX
b is b-XXX

... where XXX is the same value.

• save transitive.js

• see incorrect output in the console:

a is a-YYY
b is b-ZZZ

... where YYY and ZZZ are different values, but they should be the same.

[rixo]

Fixed it by ensuring all modules impacted by a HMR update are reloaded with the same ?mtime id (hence modules importing the same target module retrieve it with the same URL and get the same copy).

main...rixo:hmr-fix-module-duplication

Also had to adapt the test for the Bad Request: "${reqUrl}" should be requested as "${expectedUrl}". warning, because it wouldn't let pass ?mtime=... URLs.