Tiny-slider: 2.9.0 breaks webpack import

[wokung]

__Issue description__: Importing tinyslider with webpack causes Issue: Object(...) is not a function

__Demo link/slider setting__:

_Tiny-slider version_: 2.9.0
_Browser name && version_: all browser
_OS name && version_:

I import it like in the docs:
import { tns } from 'tiny-slider'
let slider= tns({
container: '.slider',
items: 1,
slideBy: 'page',
autoplay: false
})

Webpack creates his own scope:
var slider = Object(tiny_slider__WEBPACK_IMPORTED_MODULE_1__["tns"])({
container: '.category-slider',
items: 1,
slideBy: 'page',
autoplay: false
}); // bind function to event

and then I get:

vue.runtime.esm.js:626 [Vue warn]: Error in mounted hook: "TypeError: Object(...) is not a function"
.....

vue.runtime.esm.js:1858 TypeError: Object(...) is not a function
at initSlider (Slider.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:504)
at VueComponent.mounted (Slider.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:592)
at callHook (vue.runtime.esm.js:3071)
at Object.insert (vue.runtime.esm.js:4267)
at invokeInsertHook (vue.runtime.esm.js:6090)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6315)
at VueComponent.Vue._update (vue.runtime.esm.js:2800)
at VueComponent.updateComponent (vue.runtime.esm.js:2924)
at Watcher.get (vue.runtime.esm.js:3305)
at Watcher.run (vue.runtime.esm.js:3391)

[wokung]

Ok, I found the problem, but no solution yet.

in 2.8.8 import { tns } from 'tiny-slider' imports it from the /src/ folder.

/* harmony import / var tiny_slider_src_tiny_slider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/! tiny-slider/src/tiny-slider */ "./node_modules/tiny-slider/src/tiny-slider.js");

in 2.9.0 import { tns } from 'tiny-slider' imports it from the /dist/ folder.

/* harmony import / var tiny_slider_src_tiny_slider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/! tiny-slider/src/tiny-slider */ "./node_modules/tiny-slider/dist/tiny-slider.js");

When I import 2.9.0 directly with

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

it works.

Is the project build correctly?

Where did you tell him to point to /dist/tiny-slider when importing the module?

[wokung]

Ok, I found the commit, where the author changed it:

https://github.com/ganlanyuan/tiny-slider/commit/8e10b488c19f59ef9ba09eda7357a1b442970edb

However, I think the solution would be to not point to /dist/, but then we need the same (babel) compiler, to make sure not to break anything.

The /dist code only makes sense if you import the module globally

[ganlanyuan]

Oh, yeah.
I did this in reference to #338

[ivan-kleshnin]

I don't think you should distribute dist in this form at all.

Most people expect to consume CommonJS modules so I'd build ES modules to CommonJS modules.
The simplest build pipeline can look like this:

# package.json
"scripts": {
  "prebuild": "rm -rf lib && mkdir -p lib",
  "build": "babel src -d lib",
  "build-watch": "babel --watch src -d lib",
  "prepare": "npm run build",
},
"main": "lib/index.js", // your dist/index.js

I believe you don't even need Browserify in this pipeline (what does it add?).

Also I release stuff with $ np <minor|major|patch> – it has a lot of sanity checks.

Those who stuck with jQuery mindset will consume CDN anyway. They won't import/require so main field shouldn't point to a file exposing old-school globals i.m.o.

Pls. correct me if I'm wrong, I also often find myself struggling with this library/distribution topic.

[baoanhng]

I'm using webpack with laravel mix and still struggling to import correct tns instance before finding this issue.

There @wokung solution helped me.

[marcvangend]

The workaround to use import directly from src (import { tns } from 'tiny-slider/src/tiny-slider') works for me when simply running the app.

Unfortunately, when I run a Jest test on the component which contains this import I get an error message:

 FAIL  src/routes/Home.test.js
  ● Test suite failed to run

    /Users/user/project/node_modules/tiny-slider/src/tiny-slider.js:23
    import { raf } from './helpers/raf.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | // Tiny Slider must be explicitly imported from its /src/ folder, see also
      3 | // https://github.com/ganlanyuan/tiny-slider/issues/353#issuecomment-447000852.
    > 4 | import { tns } from 'tiny-slider/src/tiny-slider';
        | ^
      5 | import 'tiny-slider/dist/tiny-slider.css';
      6 | import styled from 'styled-components';
      7 | import { ReactComponent as ArrowPrevIcon } from '../assets/images/icon-arrow-prev.svg';

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/HorizontalSlider.js:4:1)

I learned from https://stackoverflow.com/a/58212338/241546 that this error is caused by importing from src instead of dist. This probably means that @ivan-kleshnin is correct and the code in dist is supposed (or at least expected) to take a different form.