Import Category class in a component

[rogerco]

Developing a component with the code in the Header section using
<script type="text/discourse-plugin" version="0.8.26">
where I have lines like
parentCat = Discourse.Category.findById(get(category, "parent_category_id"));

I am getting this on the console

Deprecation notice: Import the Category class instead of using Discourse.Category (deprecated since Discourse 2.4.0) (removal in Discourse 2.5.0)

So what do I actually need to do? If I add an import statement
import Category from "discourse/models/category"; at the top of the script it barfs saying
SyntaxError: unknown: 'import' and 'export' may only appear at the top level (18:0)

Please help a novice…

[sam (Sam Saffron)]

@rogerco

import Category from "discourse/models/category"; at the top of the script it barfs saying
SyntaxError: unknown: 'import' and 'export' may only appear at the top level

You got to use a multi JS file component to get these features see:

Split up theme Javascript into multiple files

Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the Theme CLI or source the theme from git. Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

[rogerco]

Thanks @sam, I can just about understand what I need to do.

@sam

Currently, these files can not be edited from the Discourse UI

Bit of a shame, but understandable. I guess I can source the theme from my device rather than git.
Since the warning says it will be removed in 2.5 I guess there will be a way of handling this within the component code well before 2.5 (when is that BTW?)