Import selectWoo (select2 fork)


#1

Hello,

I try to import selectWoo.

I would like to manage all my ext files with imports folder and it work more or less…

I still have some difficults to understand why it work for some and not for other…

I followed the tutorial https://guide.meteor.com/structure.html#intro-to-import-export

So currently, I would like to import selectwoo (it’s a accessible version of select2).

If I put the files in “client/compatibility” it’s working…

But not if I put in
“imports\ui\components\selectwoo”

I prefer use import method to keep the control of the loading order… and it’s seem to be more recommanded…

In my \imports\startup\client\index.js

import "../../ui/components/selectwoo/css/select2.css";
import "../../ui/components/selectwoo/css/select2-bootstrap.css";
import "../../ui/components/selectwoo/js/selectWoo.js";

in \client\js\global.js

Meteor.startup(function () {
    $('.select2').select2();

});

or

$(document).ready(function () {
    $('.select2').select2();
});

In \client\main.js

import '/imports/startup/client';

Yet I still got “Uncaught TypeError: $(…).select2 is not a function”

and

Yet, jquery is installed… I use for some other things… I did the suggested command without result and also “meteor add jquery”.

And with an another tool I follow the same process (which use also jquery)

import './bootstrap4-tagsinput-master/tagsinput.js';
import './bootstrap4-tagsinput-master/tagsinput.css';

and it’s working well.

Any idea are welcome,

thank’s

Mike


#2

Because Select2 and therefore SelectWoo, wraps the module in the UMD loader pattern, importing it returns an initialisation function as seen in the source here:

Because Meteor uses a Common JS environment on the client, you will need to import the initialisation function and pass it it’s dependencies:

import selectWoo from 'selectwoo/dist/js/selectWoo.js';
// May need to import jQuery
selectWoo(window, jQuery)

I haven’t tested this, but I think this should work.

The other alternative is to replace the call to require('jQuery') in their loader with the correct path for your app.
Which if you’re using Meteor’s jQuery package is require('meteor/jquery')


#3

Thanks alot for your detailed explanation. Very useful
working perfectly :slight_smile:

Can I ask you another import question ?

I planned to use the bootstrap package from twbs. But version 4.0.0 is not functional, it still lacks dependencies (Popper.js and some others).
So I wanted to import it myself with the same method. And it works … But … :slight_smile:

DevTools failed to parse SourceMap: http://localhost:3000/category/bootstrap.css.map
DevTools failed to parse SourceMap: http://localhost:3000/category/bootstrap-grid.css.map

I got theses messages in the console. From what I know this is related to the css preprocessor, and this is theses files which allow to debug css much easily, because currently, it’s hard to identify where the class is…

image
it do not provide the file or line related…

I try to import it like a css… but it’s not working.

Is there a good way to import theses files in meteor ?

Here my import code

import "../../ui/components/bootstrap/css/bootstrap-reboot.css";
import "../../ui/components/bootstrap/css/bootstrap.css";
import "../../ui/components/bootstrap/css/bootstrap-grid.css";
import "../../ui/components/bootstrap/js/bootstrap.bundle.js";

Thank’s

Mike


#4

For bootstrap 4 I added the fourseven:scss package and created a bootstrap.scss file in /client/.

All the file does is import bootstrap from node_modues:

@import '{}/node_modules/bootstrap/scss/bootstrap';

Which also has the benefits of being able to override bootstrap variables before compilation as well as proper sourcemaps

I haven’t found a good solution for the js except to just import the full bundle (which includes Popper):

import 'bootstrap/dist/js/bootstrap.bundle';