andrelmlins/vue-grid-responsive

Broken in V3

yspreen opened this issue · 8 comments

yspreen commented 
runtime-core.esm-bundler.js?5c40:5898 Uncaught (in promise) TypeError: selfHook.bind is not a function
    at callSyncHook (runtime-core.esm-bundler.js?5c40:5898)
    at applyOptions (runtime-core.esm-bundler.js?5c40:5662)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6507)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6440)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6380)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4118)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
    at patch (runtime-core.esm-bundler.js?5c40:3712)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3894)
    at mountElement (runtime-core.esm-bundler.js?5c40:3817)
callSyncHook @ runtime-core.esm-bundler.js?5c40:5898
applyOptions @ runtime-core.esm-bundler.js?5c40:5662
finishComponentSetup @ runtime-core.esm-bundler.js?5c40:6507
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:6440
setupComponent @ runtime-core.esm-bundler.js?5c40:6380
mountComponent @ runtime-core.esm-bundler.js?5c40:4118
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
mountChildren @ runtime-core.esm-bundler.js?5c40:3894
mountElement @ runtime-core.esm-bundler.js?5c40:3817
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4211
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
componentEffect @ runtime-core.esm-bundler.js?5c40:4278
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueCb @ runtime-core.esm-bundler.js?5c40:286
queuePostFlushCb @ runtime-core.esm-bundler.js?5c40:292
queueEffectWithSuspense @ runtime-core.esm-bundler.js?5c40:1384
scheduler @ runtime-core.esm-bundler.js?5c40:2071
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:819
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:819
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:729
finalizeNavigation @ vue-router.esm-bundler.js?6c02:3055
eval @ vue-router.esm-bundler.js?6c02:2928
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2899
push @ vue-router.esm-bundler.js?6c02:2833
install @ vue-router.esm-bundler.js?6c02:3210
use @ runtime-core.esm-bundler.js?5c40:2945
eval @ main.js?56d7:9
./src/main.js @ app.js:1301
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1374
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997

I used the minimal example from the package site:

<row container :gutter="12">
  <column :xs="12" :md="4" :lg="3">
    xs=12 md=4 lg=3
  </column>
  <column :xs="12" :md="4" :lg="3">
    xs=12 md=4 lg=3
  </column>
  <column :xs="12" :md="4" :lg="3">
    xs=12 md=4 lg=3
  </column>
  <column :xs="12" :md="4" :lg="3">
    xs=12 md=4 lg=3
  </column>
</row>
andrelmlins commented

Hi, @yspreen , I'm looking at possible solutions.

yspreen commented

That's awesome! I wasn't sure if you were still maintaining this.

  • 🎉1
andrelmlins commented

I was not yet supporting vue v3. I managed to solve a good part of the problem. However I am having some problems with the rollup-plugin-vue. We will have a new version soon.

yspreen commented

Vue 3 is still a mess. There's a reason why it's in beta...

Only way to build future-proof apps is to support it though. I appreciate the effort!

  • 👍1
andrelmlins commented

Hi @yspreen , I published a next version. Tests with version 1.0.1. For now it will not be a latest version.

andrelmlins commented

@yspreen, can you confirm if this version worked well for you?

yspreen commented

I just added the package to my project and it builds fine now! I can't tell if there are issues further down the road because I've used a different grid component now and don't want to go through the hassle of switching again. Once you add the @next info to the README, together with changing the syntax from Vue.component(...) to .component(...) it should be good to go :)

  • 🎉1