Mixing dev and prod builds

[j3rem1e]

Describe the bug

My application is developed as a kind of "micro-front-end". I have a core module which exposes components, routers and utilities. This module dynamically loads business modules.

Theses modules are developped by differents teams and are all isolated.

I'd like to use Svelte "dev" compiler options in a module without the core to be compiled with this options, or the other way: using a core in dev mode, and a business module without the dev options.

Today it's not possible because there is a check in SvelteDevComponent :

https://github.com/sveltejs/svelte/blob/f111cf6881d6708f0e7d0b7db9653f411dd6bab1/src/runtime/internal/dev.ts#L118

The property $$inline is set only in dev mode here (with a comment about this "Ugly Hack")

https://github.com/sveltejs/svelte/blob/f111cf6881d6708f0e7d0b7db9653f411dd6bab1/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts#L193

Logs

index.mjs:1582 Uncaught (in promise) Error: 'target' is a required option
    at new de (index.mjs:1582)
    at new DataBrowser (DataBrowser.svelte:17)
    at a (ui-monitoring.js:1)
    at Jt (index.mjs:1424)
    at new s (ui-monitoring.js:1)
    at Object.update [as p] (AppMain.svelte:13)
    at Object.update [as p] (AppLayout.svelte:7)
    at ut (index.mjs:707)
    at rt (index.mjs:676)

Expected behavior

Is it possible to change the "throw" to only a console.warn() ?

Information about your Svelte project:

• Chrome 80
• Windows 7
• Svelte 3.22
• Webpack with svelte-loader

Severity

It can't use the dev options now because of this throw. It's not that important, however there is a lot of interessing compile-time check with the dev property.

[j3rem1e]

@Conduitry what kind of clarification do you need, except maybe my very bad english ? :-)

[antony]

It's not clear what to expect if you were to omit target from the options.

target is a dom element in which Svelte mounts the component. Without it, what would be the expected behaviour?

[j3rem1e]

target is only required when calling the constructor explicitly in javascript. Svelte instanciates components without the target property (but add a $$inline property to disable this check, see [1]).

If a template build with svelte without development mode links at runtime to a svelte library with devmod activated, then $$inline is not injected by the template and the check fails.

[1] https://github.com/sveltejs/svelte/blob/f111cf6881d6708f0e7d0b7db9653f411dd6bab1/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts#L193

[withinoneyear]

@j3rem1e thanks for sharing, I have the same issue now. Have you found any solution/workaround? Thanks

[j3rem1e]

@withinoneyear No, I had to disable dev build for most if not all of my sub-project

[sastan]

We are not packaging svelte components as raw svelte files but are transpiling one for development and one for production.

Currently, we are using the browser:module package.json field for development builds which is picked by snowpack (our dev server) and module for production builds which used by our bundler (rollup). In the future, we like to use export conditions to achieve better separation.

For the typescript support, we are generating a d.ts file using svelte jsx.

Maybe that helps. If you like to know more just let me know.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[j3rem1e]

It still doesn't work.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[j3rem1e]

up, I'd like to have to throw replaced by just a log.