Importing directly min.js cause errors

[angelarted]

Hallo! I tried importing Zing library in an ES6 project as suggested in the main site (https://zingchart.github.io/zingtouch/) with this path:

  import ZingTouch from '../vendor/zingtouch/dist/zingtouch.min.js';

screenshot of the suggestion in the main page

and it caused an error, I attach the screenshots

screenshot of the error

Than I added it in the way suggested in the github page and it worked well (same code)

    import ZingTouch from '../vendor/zingtouch';

screenshot of the suggestion in github page

Can you tell why? Many thanks!

[mike-schultz]

@angelarted Hey thanks for noticing that. The snippet on the homepage is outdated and I'll go ahead and fix that to the correct one on github.

The zingtouch.min.js file is made to attach itself to the global window object and does not force the developer to use module imports.

The import ZingTouch from 'zingtouch' syntax is actually pointing to the index.js file in the project via npm and the package.json. That file has the following code:

require('./dist/zingtouch.min.js');
module.exports = ZingTouch;

It's a small wrapper that imports the zingtouch.min.js file into it's own namespace, and then exports the single ZingTouch variable so it does not pollute your global namespace.

Importing the .min.js file directly won't work since nothing is being exported out as a module, hence your error.

[agriffi10]

@mike-schultz HI there, I used the ES6 method to install ZingTouch as described in your comment, but the ZingTouch module is still added to my global namespace. Is that always going to be the case, or is there a way I can prevent it from being added to my global namespace?