getContext doesn't work in a component

[lud]

getContext(someKey) does not work in a component rendered by a Route, whereas it works wen directly calling the component aside to the <Router/>.

[conick]

The same problem

[pateketrueke]

Issues derived from getContext() are dependant of the bundler setup actually, if you're not consuming those svelte componentes properly then they will not work as you're expecting.

How's your setup? Webpack? Parcel? Rollup? Svelte-cli?

[lud]

This is my rollup config:

import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'

import commonjs from 'rollup-plugin-commonjs'
// import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import alias from 'rollup-plugin-import-alias'

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'js/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: '../priv/static/js/bundle.js',
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('../priv/static/css/bundle.css')
      },
    }),

    alias({
      Paths: {
        '@': './js',
      },
      Extensions: ['js', 'svelte'],
    }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration —
    // consult the documentation for details:
    // https://github.com/rollup/rollup-plugin-commonjs
    resolve({
      browser: true,
    }),
    commonjs(),

    // // Watch the `public` directory and refresh the
    // // browser on changes when not in production
    // !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
}

[pateketrueke]

Please update rollup-plugin-node-resolve and enable svelte in the mainFields options.

[lud]

Thank you.
I followed your advice but it changes nothing. Context is undefined under a Route component but is well defined in other components.

[pateketrueke]

Can you setup a gist at svelte-repl with the code you're using for? I never tried to work along with aliases pointing to svelte sources, the thing is that svero is working pretty well, and it is well tested and integrated, even working on the REPL.

It's hard to figure out what's different with no more clue.

[lud]

Thank you for your help on this.

Actually my build had a strange behaviour after I updated the resolve plugin. I know my code updated because I'set tests with set/get Context in different places and I could see them in the browser, but after that it stopped to build with a very cryptic reason ; so i rolled everything back.

I could setup a gist but now I am not confident with my build ; I actually suck at configuring rollup or webpack or whatever. Could you show me how do you import svero in the REPL ?

[pateketrueke]

Check out this example: https://svelte.dev/repl/cbce750dd5f3407eb06c9e7a28fec815?version=3.6.8

You must download it to examine how is setup, the REPL is not allowing URL redirections from.

[lud]

Thank you. Indeed it seems to work here.

I found that when initializing, current_component (renamed as parent_component) of svelte is undefined, that is why a new context is created for my route component.

Maybe this information will give you an idea of the problem.

Edit: it gave me an idea:

This is what i use, and it doesn't work:
<Route path="/game" component={Dashboard} />

But this works:

<Route path="/game">
    <Dashboard/>
</Route>

Edit 2 :
And finally I found that when svero calls this:

currentComponent = new route.component({
      target: ctx,
      props: {
        router: {
          route,
          params
        }
      }
    });

It is normal not to have a parent component. So why does it work on the REPL ?

[pateketrueke]

currentComponent = new route.component

We're not longer doing that (v1.0.0), instead we're using <svelte:component /> always. 🤔

So why does it work on the REPL ?

The REPL is loading the latest version, which version you're using?

[lud]

0.5.0 . I tried to upgrade with yarn but it keeped this version so I thought it was the last.

[lud]

Ok it works well with the fresh version !
Thank you very much for your time :)

[pateketrueke]

No problem, glad to help you! 🍻