effect_orphan `$effect` can only be used inside an effect

[sacrosanctic]

Describe the bug

Difficult to understand error msg.

Reproduction

REPL

Related

https://discord.com/channels/457912077277855764/1341461743305494609

Severity

annoyance

[Conduitry]

What would you suggest? When something's imported like that, it's just run once, outside of the initialization of any particular component. You'd have to put the $effect() inside a function call, and then call that from the top level of your component's <script> to ensure that it's getting run during the initialization of a specific component.

[Ocean-OS]

I do think we should better explain $effect.root in the documentation as to provide more insight to these errors. I don't think we should be dependent on people reading documentation, but if they are confused they'll probably consult it. We could take inspiration from Solid's createRoot docs to improve our info on effect roots.

[sacrosanctic]

There's no obvious corrective action for the user to take. The error msg is almost cyclical. Clicking through the url leaves them with the same error msg.

Users expect that to work because they can do this

// foo.svelte.js
// This works
export const foo = $state({value: 1})

// So they think this works, mirroring a *.svelte component
$effect(()=>{
  conole.log('here')
})

I think defining inside an effect or provide an example would go a long way to resolve this confusion.

[sacrosanctic]

https://discord.com/channels/457912077277855764/1343686205694541905

effect_orphan $inspect can only be used inside an effect (e.g. during component initialisation) https://svelte.dev/e/effect_orphan

Here's another instance of someone using $inspect in <script module>. The error again doesn't guide the user in any way.

[imsys]

Here's another instance of someone using $inspect in <script module>. The error again doesn't guide the user in any way.

I also got error when trying to use $inspect.

The documentation says: "The $inspect rune is roughly equivalent to console.log", but it's not a direct replacement that "only works during development."

The other option is {@debug ...}, but that doesn't work in the js/ts code.

[imsys]

The closest solution I found would be to use the @rollup/plugin-strip in Vite to strip debug logs.

[MotionlessTrain]

If you only want to use $inspect as console.log during dev, that is an abuse of it
It is meant to log whenever the stateful variable you gave it changes, and what its value is now (that part doesn’t work outside of an effect root, which is why you get this warning)

Otherwise you can write something quite easily:

import { DEV } from ‘esm-env’ // or dev from $app/environment if you use sveltekit

export function mylog(...args) {
  if (DEV) console.log(...args)
}