diff --git a/.changeset/breezy-rules-beg.md b/.changeset/breezy-rules-beg.md new file mode 100644 index 0000000000..094aef5a19 --- /dev/null +++ b/.changeset/breezy-rules-beg.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: further improvements to hmr component key generation diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js index 816d576985..cf952d1520 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js @@ -422,7 +422,10 @@ export function client_component(source, analysis, options) { ) ]; - if (options.hmr) { + // In order for hmr to work correctly, we need associate each component with a unique key. + // This is because bundlers might put many components into a the same module (usuaully as a chunk). + // `import.meta.hot` will then be the same object for all components in that modules. + if (options.hmr && options.filename) { body.push( b.export_default( b.conditional( @@ -431,7 +434,7 @@ export function client_component(source, analysis, options) { '$.hmr', b.member(b.import_meta_hot(), b.id('data')), b.id(analysis.name), - b.member(b.member(b.id('import'), b.id('meta')), b.id('url')) + b.literal(options.filename) ), b.id(analysis.name) )