Importing JS from Node_Modules

1

Ok, I read the Docs, i look at some topics here on the forum, but nothing seems to work right.

I want to really understand how this works, and how to proper import a node_module.

Installed BsMultiSelect and WebDataRocks using:
meteor npm install @dashboardcode/bsmultiselect
meteor npm i webdatarocks --save
It added the module on the node_modules folder.

I tried to import on the client, import via script tag on html:
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>

But nothing seems to work. I gave up on the WebDataRocks, started using its CDN. But the MultiSelect does not have it.

So. How is the proper way to import from node_modules? What I am missing here?

Happy new year and thanks for your time!

2

Ah you should not use the script tags to load stuff from the node_modules. You should use the import / export functionality like this:

import '@dashboardcode/bsmultiselect';

I think the best place for this module is to load it somewhere early in your code (like your client main file).

1 Like
3

Nice! Going to test here.

What about the CSS’s from Node_Modules? Is it ok to import on the client too?

4

Your suggestion gave me the error:
TypeError: $(...).dashboardCodeBsMultiSelect is not a function

I tried:
import '@dashboardcode/bsmultiselect/js/dist/BsMultiSelect.js';

And Client broke with 70 meteor errors, like Uncaught TypeError: Cannot read property 'meteorInstall' of undefined. The first one directs me to the Node_Module import:

Uncaught SyntaxError: Unexpected identifier

Any ideas? Thank you again for your time

5

make sure you import the file before using $(...).dashboardCodeBsMultiSelect

also, https://github.com/DashboardCode/BsMultiSelect has a weird folder strucutre, i think '@dashboardcode/bsmultiselect/js/dist/BsMultiSelect.js'; seems to be accidentially added.

you should import '@dashboardcode/bsmultiselect/dist/js/BsMultiSelect.js';

because that is the transpiled version.

6

Thanks so much! I also though it was wierd how the project was structured.

I gave up on it. Even doing what you suggested I had a bad time doing because some “Module Imports should came before something error”, and I started using bootstrap-select, does the same thing and worked without any tweaks.

Happy new year