ecmascript-6importnouislider

noUiSlider ES6 import

I report here what I have reported here too: https://github.com/leongersen/noUiSlider/issues/971.

I've installed noUiSlider with ES6 imports (no webpack) as suggested in the official repo https://github.com/leongersen/noUiSlider#webpack.

So this is what I have.

// main.js
import 'nouislider';

//index.html

<html>

<body>

  <div id="slider"></div>

  <script src="js/bundle.js"></script>

  <script>
    var slider = document.getElementById('slider');

    noUiSlider.create(slider, {
      start: [20, 80],
      connect: true,
      range: {
        'min': 0,
        'max': 100
      }
    });
  </script>

</body>

</html>

But it doesn't work and in the console I have the following message 

Uncaught ReferenceError: noUiSlider is not defined.

If I insert <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script> instead of <script src="js/bundle.js"></script> it works.

Can someone help me? Thanks.

Solution

  • The import 'nouislider' in main.js imports the variable noUiSlider into that file.

    By default, it does not export it into your window object. When you include the script from the CDN it does export into window, which is why it works there.

    You could either: