Sapper: Function called outside component initialization

[btakita]

I'm getting a Function called outside component initialization error from a sapper v0.26.0-alpha.10 project.

A component is being loaded from a index.html route component. This component is calling onMount, beforeUpdate, afterUpdate, or onDestroy.

I tried moving onMount into a setTimeout & the same issue occurs.

Unfortunately, I'm not able to reproduce it in the repl. Hopefully, this will be fixed or a reproduction for this issue will emerge.

[btakita]

The generated code calls .$$render instead of .render on the component.

[btakita]

This is a svelte issue. https://github.com/sveltejs/svelte/issues/2156

[btakita]

It looks like the issue stems from having "svelte" as a dependency instead of a devDependencies in package.json within the sapper project.

This causes import 'svelte' to load the rollup excluded npm package's set_current_component instead of from within the sapper generated server.js.

See

Excluded packages in rollup.config.js:
https://github.com/sveltejs/sapper-template/blob/rollup-v3/rollup.config.js#L69

svelte as a devDependency so the npm package is not used by the server runtime: https://github.com/sveltejs/sapper-template/blob/rollup-v3/package.json#L22

[mdskinner]

The above wasn't relevant for me - from the docs:
A <script> block contains JavaScript that runs when a component instance is created.

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance.

You can't call a function outside of component initialization...
You can't call a function within <script context="module">

Moving it to the standard <script> tag works fine

[hugosenari]

I know that since we bundle it, makes no difference if svelte is dep or devDep, but makes sense to me set things that my code import as dep and even eslint complains about it.

DX:

• start sapper project; :smile:
• configure eslint; :smiley:
• eslint say that svelt should be dep; :thinking:
• update package.json; :man_shrugging:
• build fails with crypt error; :cry:
• try to figure what the hell; :confused:
• google it; :crossed_fingers:
• come here (if you have luck); :four_leaf_clover:
• revert package.json; :disappointed:
• add ignore error to eslint; :disappointed:

Maybe we should offer better solution for this.

[Conduitry]

What eslint rule or plugin says that svelte should be a prod dependency and not a dev dependency? That seems to be where the real problem is.

Having the bundler config bundle dev deps and leave prod deps as external seems to be the sanest thing it could default to, and I don't see us wanting to change that.

[hugosenari]

Thank you for replying fast. :peace_symbol:

ESlint rule about dependencies.

We could at least try to offer better error message for this, before it becomes our next NullPointerException, Segmentation Fault or Kernel Panic (more memes).

When the message say function was called outside component initialization first will look at my code and last at my configuration.

In the last case we could suggest dependency-cruiser or similar in templates.

edit: I wasn't aware that yarn had dependency validation.

[Conduitry]

According to the readme for that plugin, it should allow imports of devDependencies unless you specifically configure that to be disallowed, so I'm not sure what you're seeing there. And the Sapper template can't really guard against it if you decide to move something from devDependencies to dependencies. I don't think we need more tooling here.

[ANovokmet]

Got this issue migrating my project to Svelte 3.
The problem was with my rollup.config.js.
plugins: [svelte(), commonjs(), nodeResolve(), typescript()]
did not result in a working bundle. When fixed to
plugins: [svelte(), nodeResolve(), commonjs(), typescript()]
the error disappeared.

[jagrut-18]

This Function called outside component initialization error occurred in my case because I called createEventDispatcher() inside a function.
Error in this case:

Fix in my case: