-
Notifications
You must be signed in to change notification settings - Fork 787
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
2.9.0 breaks webpack import #353
Comments
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? |
Ok, I found the commit, where the author changed it: 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 |
Oh, yeah. |
I don't think you should distribute Most people expect to consume CommonJS modules so I'd build ES modules to CommonJS modules.
I believe you don't even need Browserify in this pipeline (what does it add?). Also I release stuff with Those who stuck with jQuery mindset will consume CDN anyway. They won't import/require so Pls. correct me if I'm wrong, I also often find myself struggling with this library/distribution topic. |
I'm using webpack with laravel mix and still struggling to import correct tns instance before finding this issue. There @wokung solution helped me. |
The workaround to use import directly from src ( Unfortunately, when I run a Jest test on the component which contains this import I get an error message:
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. |
Create CommonJS module builds (fixes #353)
@wokung 's solution worked for me, with one slight tweak. Had to add '.js' in the path: |
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)
The text was updated successfully, but these errors were encountered: