Tiny-slider: Issues when importing via Webpack

[lourenc]

Hi,

I'm trying to use this library along with Webpack. But when I import it like this:

import tinySlider from 'tiny-slider'
console.log(tinySlider)

It imports only one empty object ( => {}).
Am I doing anything wrong? Is it actually possible to use it this way?

[ganlanyuan]

Hi,
it doesn't support module right now.
Will consider add ES6 module recently.

[craigryan]

Nice library, thanks for the code and the effort!

I too would like to add my request for an update to set module.exports to tns (if my vote further helps prioritise your improvements!). In my case I have an ES6/angular 1.5 app, I did get it working using webpack exports-loader. In my component I use require (using full script or minified path) and assign to a var. I then refer to the var directly in the controller. The postLink method is called once the DOM is ready and the slider can be initialised.

Install:

npm install exports-loader --save

Example:

let tinySliderModule = require("exports?tns!tiny-slider/dist/tiny-slider.js");

 controller: class MyController {
      constructor() {
          this.tinySliderModule = tinySliderModule;
      }

      $postLink() {
          this.tinySlider = this.tinySliderModule({....options....});
       }

I have other issues which I'll post separately, happy to contribute to the project but need guidance.

[ganlanyuan]

I added module support in module branch and tested it via rollup and webpack.
You should be able to use import { tns } from "path/to/src/tiny-slider.pro" to import it to your script.

@lourenc Could you test it?
@craigryan Could you test via exports-loader? If it works, #21 should be fixed as well.

[ganlanyuan]

Module branch was merged to master branch and add a new release, you can test it on master branch now.

[ganlanyuan]

Close for now. Feel free to reopen it if the issue still exists.

[craigryan]

Thanks mate, been busy but will try soon.

On 4 Mar 2017 23:11, "William Lin" [e-mail] wrote:

Closed #20 https://github.com/ganlanyuan/tiny-slider/issues/20.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ganlanyuan/tiny-slider/issues/20#event-986443570, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ADw2riOmBxVmVOhQbGhkeoAkdo7tty5kks5riVT_gaJpZM4LhsuD
.

[tzsk]

Can't load in React JS app.

Tried following:

import { tns } from 'tiny-slider';
// And also...
import { tns } from 'tiny-slider/src/tiny-slider';
// And...
import { tns } from 'tiny-slider/src/tiny-slider.module';
// And also...
import * as tns from 'tiny-slider/src/tiny-slider';

Tried logging the tns funtion. All returns undefined. And the last one returned empty object.

Any thoughts?

[ganlanyuan]

Didn't test in react, will check it in this week.

[S1SYPHOS]

I simply installed tiny-slider via npm and did the following (using webpack):

// app.js
import {tns} from 'tiny-slider/src/tiny-slider';
tns();

which contradicts @tzsk 's experience - what software are you working with?

[chadspencer]

I'm having the same issue as @tzsk. @ganlanyuan were you able to test it in React yet?

[ganlanyuan]

Sorry, I was busy last week and didn't have time to check it.
I will check it tmr for sure.

[ganlanyuan]

Actually I'm not familiar with react, so it may take a long time to discover the issue.
If anyone who is familiar with react can help, that will be great!

[chadspencer]

I'm actually using Aurelia on my end. My concern is that the module as a whole isn't working. Has anyone gotten it to work as a module?

[tzsk]

Exactly I was testing the same thing. I was testing this package with custom bare bone webpack project. I tried loading this module. The module itself doesn't seem to be working.

Like @chadspencer Said.

And I think we should open this Issue to get it fixed by collective effort.

[chadspencer]

@ganlanyuan Is there something that may have been broken in the latest merge?

[tzsk]

@ganlanyuan Okay... I figured it out. Did some changes to the source code to test and I finally got it working with the file from the /dist directory. It is working as of now.

Will test some more and then will post a PR.

[chadspencer]

That's great @tzsk, I look forward to seeing the fix!

[CharlesKumar]

similar issue in vue js 2.5.8, webpack 3.8.1, webpack-cli 2.7.0

"tiny-slider": "^2.3.5"
"vue-loader": "^13.3.0",

tried importing

1. import tns from 'tiny-slider/dist/tiny-slider.js'
2. import tns from 'tiny-slider' default webpack resolve
3. import tns from 'tiny-slider/dist/tiny-slider.js'

tns init/config

var slide = tns({ container: '.main-slider', items: carouselImages.length, mode: 'carousel', lazyload: true, mouseDrag: true, fixedWidth: 700, // slideBy: 'page', autoplay: true });

console.log(tns)

(options) { options = Object(__WEBPACK_IMPORTED_MODULE_2__helpers_extend__["a" /* extend */])({ container: doc.querySelector('.slider'), mode: 'carousel', axis: 'horizontal', items:…

It shows no error but not working [not even creating .tns-outer, .tns-inner, .tns-item, .tns-slide]

[ganlanyuan]

Hey @CharlesKumar ,
You should import tiny-slider/src/tiny-slider.module.js.
Please refer to https://github.com/ganlanyuan/tiny-slider#1-include-tiny-slider

[mortensassi]

for anyone still struggeling with wrapping this slider in a module:

import { tns } from 'tiny-slider/src/tiny-slider';

const verticalSlider = selector =>
  tns({
    container: selector,
    axis: 'vertical',
  });

export default verticalSlider;

[gavatwork]

for anyone still struggeling with wrapping this slider in a module:

import { tns } from 'tiny-slider/src/tiny-slider';

const verticalSlider = selector =>
  tns({
    container: selector,
    axis: 'vertical',
  });

export default verticalSlider;

This is awesome! I'm so new to to webpack/js etc... so now how would I use this in HTML to invoke tiny slider?

I know dumb question... I'm learning 😄

[mortensassi]

for anyone still struggeling with wrapping this slider in a module:

import { tns } from 'tiny-slider/src/tiny-slider';

const verticalSlider = selector =>
  tns({
    container: selector,
    axis: 'vertical',
  });

export default verticalSlider;

This is awesome! I'm so new to to webpack/js etc... so now how would I use this in HTML to invoke tiny slider?

I know dumb question... I'm learning 😄

Glad it helped you :) As you can see we export the module verticalSlider and it accepts a selector as a parameter. So when you import this module in your app.js it would work like this:

import verticalSlider from './modules/verticalSlider.js';

verticalSlider('.my-selector');

[gavatwork]

THANK YOU! This is so cool. Thanks for the help! 👍 ❤️

[Doniyor4120]

I have simply installed tiny-slider via npm and imported in my js file _ex_ app.js
import { tns } from 'tiny-slider/src/tiny-slider';

[dantahoua]

Did the same thing, import { tns } from 'tiny-slider/src/tiny-slider'; in my app.js which is minified so I have just one file loaded for my js on my website.
But when I try to call tns after, always ending up with tns is not defined...
Tried everything, I dont understand...
Even tried window.tns = tns;
nothing.
If someone could explain me.

[mortensassi]

@dantahoua can you please show your code?

[dantahoua]

import $ from 'jquery'; import whatInput from 'what-input'; window.$ = $; import Foundation from 'foundation-sites'; import {tns} from 'tiny-slider'; window.tns = tns; $(document).foundation();
No error here. The app.js is generated and minified.

In then in my template on the page were I want to use tiny-slider:
<script> $(document).ready(function () { var slider = tns({ container: '.full-width-tiny-slider', items: 1, slideBy: 'page', autoplay: true, autoplayButtonOutput: false, mode: 'gallery', "lazyload": true, controlsText: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>', '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'], nav: false, speed: 1000 }); }); </script>

[mortensassi]

import $ from 'jquery'; import whatInput from 'what-input'; window.$ = $; import Foundation from 'foundation-sites'; import {tns} from 'tiny-slider'; window.tns = tns; $(document).foundation();
No error here. The app.js is generated and minified.

In then in my template on the page were I want to use tiny-slider:
<script> $(document).ready(function () { var slider = tns({ container: '.full-width-tiny-slider', items: 1, slideBy: 'page', autoplay: true, autoplayButtonOutput: false, mode: 'gallery', "lazyload": true, controlsText: ['<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>', '<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>'], nav: false, speed: 1000 }); }); </script>

Did you try : import { tns } from 'tiny-slider/src/tiny-slider'; ? you're just importing tiny-slider