diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index bb1487ba66..fe0b3857f2 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -209,8 +209,9 @@ export default function dom( var nodes = @children( options.target ); options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create(); nodes.forEach( @detachNode ); - ` - : deindent` + ` : + deindent` + ${options.dev && `if ( options.hydrate ) throw new Error( 'options.hydrate only works if the component was compiled with the \`hydratable: true\` option' );`} this._fragment.create(); `} this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null ); diff --git a/test/runtime/index.js b/test/runtime/index.js index 6c599ce96d..16d5820f0b 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -230,4 +230,23 @@ describe("runtime", () => { new SvelteComponent(); }, /'target' is a required option/); }); + + it("fails if options.hydrate is true but the component is non-hydratable", () => { + const { code } = svelte.compile(`
`, { + format: "iife", + name: "SvelteComponent", + dev: true + }); + + const SvelteComponent = eval( + `(function () { ${code}; return SvelteComponent; }())` + ); + + assert.throws(() => { + new SvelteComponent({ + target: {}, + hydrate: true + }); + }, /options.hydrate only works if the component was compiled with the `hydratable: true` option/); + }); });