Import selectWoo (select2 fork)

imike57 · December 12, 2017, 8:39pm

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 Application Structure | Meteor Guide

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

coagmano · December 13, 2017, 12:25am

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:

github.com

woocommerce/selectWoo/blob/master/dist/js/selectWoo.js#L12-L29


} else if (typeof module === 'object' && module.exports) {
  // Node/CommonJS
  module.exports = function (root, jQuery) {
    if (jQuery === undefined) {
      // require('jQuery') returns a factory that requires window to
      // build a jQuery instance, we normalize how we use modules
      // that require this pattern but the window provided is a noop
      // if it's defined (how jquery works)
      if (typeof window !== 'undefined') {
        jQuery = require('jquery');
      }
      else {
        jQuery = require('jquery')(root);
      }
    }
    factory(jQuery);
    return jQuery;
  };

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

imike57 · December 13, 2017, 5:11pm

Thanks alot for your detailed explanation. Very useful
working perfectly

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 …

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…

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

coagmano · December 13, 2017, 11:07pm

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