Problem importing external js library

sage
1

Hi all,

I must be doing something wrong! I’m trying to import stickybits into main.js and use in common.js. So I’ve run yarn add stickybits and in main.js I have:

import 'stickybits';

When I inspect my compiled main.js file I can see that the library is getting included. In my routes/common.js file I have:

// eslint-disable-next-line no-undef
stickybits('.site-header');

But when I build my project, my console says ReferenceError: stickybits is not defined - I’ve also tried importing directly into common.js but even that doesn’t work. I’m finding dealing with external libraries one of the most frustratingly difficult things about Sage 9, so any tips or helpers would be fab.

Many thanks
Kevin

2

Try this in common.js:

import stickybits from 'stickybits';

EDIT: sorry for typos.

1 Like
3

Just tried that and got a eslint error: 5:21 error Parsing error: Unexpected token from :confused:

4

I just updated my post. Sorry I had some typos.

5

OK great, I had to import into common.js but that worked. Can you explain why though? what’s the difference using the from? And why can’t I import into main.js and use in common - namespace issue?? Really struggling with this at the moment. Thanks again!

6

This does a good job of explaining import + from:

Each module (i.e. common, home, about, etc.) needs to specify its own imports. jQuery is global though. You’d have to dive into resources/assets/build/webpack.config.js to see how that’s done or look it up on discourse.

Sorry if that’s not a great explanation. I’m learning a lot of this stuff myself. I would recommend taking a look at some more modern JS stuff + diving into webpack a bit. Sage is a great tool to learn from.

1 Like
7

@knowler that’s great, thank you for your help! Really appreciate it

Kev