yariksav / vuetify-confirm

Extends vuetify.js confirm dialog
MIT License
143 stars 42 forks source link

vuetify-confirm requires babel transformation #2

Closed AtofStryker closed 6 years ago

AtofStryker commented 6 years ago

in index.js

import Confirm from './Confirm'

will fail in browsers or projects that are not using babel to transpile code to transform es6 syntax

expected behavior: index.js is already processed for consumption

import Confirm from './Confirm' to const Confirm from require('./Confirm')

not sure if this is by design or not. Thought it would be a good idea to open the issue

yariksav commented 6 years ago

Why you don't use babel in your project? All frameworks as Nuxt.js, Vue-cli use it.

const Confirm from require('./Confirm') will not help you because all code is in es6 and vue syntax You have to use babel in your project or I need to create converter all module code to one es5 file

sne11ius commented 6 years ago

It's common to exclude dependencies from babel transpiling like this:

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
},

To make it work in such project, one has to exclude vuetify-confirm from the exclusion like this:

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules\/(?!(vuetify-confirm)\/)(.js|.vue)/
},

This should work I think. But on my machine I get this:

DONE  Compiled successfully in 28684ms

webpack built a99c4c703b7656d2e7ea in 28684ms
error during render : /
TypeError: __webpack_require__(...) is not a function
    at Object.<anonymous> (server-bundle.js:679:78)
    at __webpack_require__ (webpack:/webpack/bootstrap 2bcb60bdc7d63d40c7a8:25:0)
    at Object.<anonymous> (server-bundle.js:170:56)
    at __webpack_require__ (webpack:/webpack/bootstrap 2bcb60bdc7d63d40c7a8:25:0)
    at Object.<anonymous> (~/vuetify/dist/vuetify.min.css:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2bcb60bdc7d63d40c7a8:25:0)
    at Object.<anonymous> (~/vuetify/dist/vuetify.min.css?e3c0:4:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2bcb60bdc7d63d40c7a8:25:0)
    at Object.<anonymous> (server-bundle.js:842:87)
    at __webpack_require__ (webpack:/webpack/bootstrap 2bcb60bdc7d63d40c7a8:25:0)

This is a little over my head tbh, so I will try to revert to an older version of vuetify-confirm if I find one that works.

sne11ius commented 6 years ago

... or, to give it a different spin: with my current build setup, I can use vuetify without problems but run into problems with vuetify-confirm.

AtofStryker commented 6 years ago

Hey @yariksav. Sorry I haven't been active on this in a while. Appreciate you all taking the time to look at it

The problem is what @sne11ius has mentioned above. We need to explicitly transpile vuetify-confirm to get the project to run in all browsers. Typically projects like Vuetify, and others ship distributions that are already transpiled and are shipped with source maps.

I wasnt sure if there was a rationale behind this, but I would be happy to contribute and write a webpack/babel type script to bundle the code for distribution

yariksav commented 6 years ago

I've made auto build to dist folder. Please install next version 0.0.6, it must fix this issue. npm i vuetify-confirm@0.0.6 @AtofStryker, thank you for your issue, please check is all works correctly

AtofStryker commented 6 years ago

@yariksav just downloaded. Works great! Thank you!

sne11ius commented 6 years ago

Works for me, thank you!