[SelfSolved] ReactiveVar get/set undefined after import

[venomclc]

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');

Template.Nav_bar.helpers({
    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 () {
    console.log(NavBarTitle);
    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

[venomclc]

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(() => {
  CurrentLanguage.get();
});

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.

[coagmano]

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?

meteor/guide/blob/master/content/ui-ux.md

[venomclc]

Sure

Corrected importing of ReactiveVar

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