[SelfSolved] ReactiveVar get/set undefined after import


Hi all,
Scenario: I have a nav bar and page content rendered under it.
I want the nav bar title to be changed from the rendered content under.

Nav bar:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './nav-bar.html';

export const NavBarTitle = new ReactiveVar('Title');

    title: () => {
        return NavBarTitle.get();

Example page rendered under

import { Template } from 'meteor/templating';
import NavBarTitle from '/imports/ui/components/nav-bar/nav-bar.js';
import './language-selection.html';

Template.Language_selection.onCreated(function () {
    NavBarTitle.set("Language selection");

the console.log part actually shows NavBarTitle as a ReactiveVar but with no methods on it…

and the Js error:

Exception in defer callback: TypeError: NavBarTitle.set is not a function

//EDIT: I also tried putting the code inside onRendered and inside events (a click event) -> I get the same error, and the same object in console.log


The documentation says that

// A store to use for the current language
export const CurrentLanguage = new ReactiveVar('en');
import CurrentLanguage from '../stores/current-language.js';
TAPi18n.setLanguage(() => {

I put curly braces around NavBarTitle like:

import { NavBarTitle } from '/imports/ui/components/nav-bar/nav-bar.js';

and it worked now. Someone please edit the misleading docs.
Another thread I answer myself…well hopefully it helps someone else too.


Yep, those docs are definitely wrong

The link to edit the docs are at the top and bottom of each article. Want to add a PR for that change now?



But if I need to sign that agreement thing then no.