Skip to content
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.

Sign up for GitHub

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

Jump to bottom

BFieldBody - TypeError: this.$slots.default is not a function #18

Closed
mateuswetah opened this issue Aug 1, 2023 · 11 comments
Closed

BFieldBody - TypeError: this.$slots.default is not a function #18

mateuswetah opened this issue Aug 1, 2023 · 11 comments

Comments

@mateuswetah
Copy link

Overview of the problem

Continuing my tests with vue-compat installed... There is one bug that seems a bit more serious. An error message appears from the BFieldBody component.

Buefy-next version: 0.1.0
Vuejs version: 3.3.4
OS/Browser: Linux/Firefox

Description

The following error message message appears:
image

I did some search about and it might be some different behavior from old $scopedSlots to current $slots... maybe default is not always a function inside it?

Steps to reproduce

I'm not 100% sure which <b-field> in my code is generating this, I actually have several with different components inside.

Expected behavior

No error messages :)
@kikuomax
Copy link
Collaborator

kikuomax commented Aug 2, 2023 •
edited

@mateuswetah I found an empty BFieldBody crashed with the same error in my unit test configuration. However, simply making an empty horizontal BField (<b-field horizontal></b-field>) was not able to reproduce the problem. Please note that BFieldBody is not exported and is rendered only in a horizontal BField. So there might be other reasons.

@kikuomax kikuomax mentioned this issue Aug 2, 2023
Closed
80 tasks
kikuomax added a commit to kikuomax/buefy that referenced this issue Aug 2, 2023
@kikuomax
fix(lib): empty FieldBody crash
aecfb9b 
- Fixes the bug where `FieldBody` crashed if no default slot was given.
  `FieldBody` makes sure that `this.$slots.default` is a function before
  calling it and not null before accesssing its fields. This is a
  potential cause of ntohq#18, but there might be other
  reasons.

issue ntohq#18
@kikuomax kikuomax mentioned this issue Aug 2, 2023
Merged
wesdevpro pushed a commit that referenced this issue Aug 2, 2023
@kikuomax
fix(lib): empty FieldBody crash (#22)
64c50fb 
- Fixes the bug where `FieldBody` crashed if no default slot was given.
  `FieldBody` makes sure that `this.$slots.default` is a function before
  calling it and not null before accesssing its fields. This is a
  potential cause of #18, but there might be other
  reasons.

issue #18
kikuomax added a commit that referenced this issue Aug 2, 2023
@kikuomax
test(lib): add test case for FieldBody
47c3b12 
- Adds a new test case for `FieldBody`, which instantiates a `FieldBody`
  without the default slot.

  This test won't pass until the issue mentioned in the following
  comment:
    - #18 (comment)

issue #1 (comment)
@mateuswetah
Copy link
Author

Nice work @kikuomax! Do you guys plan on releasing minor versions with fixes like this in the npm or should I test directly via git before?

@mateuswetah
Copy link
Author

Hey @kikuomax, just checking, any comments on the npm update?

@wesdevpro
Copy link

wesdevpro commented Aug 8, 2023 •
edited

Hey @kikuomax, just checking, any comments on the npm update?

Whenever, we pull from dev into main then a new package will be pushed to NPM. Not sure how often we will do this but obviously the more we publish updates to main the more feedback we can receive from other developers. I'll ask @kikuomax if he would like for me to creat a PR to push a new version to main

@mateuswetah
Copy link
Author

Got it. Thanks, it would help me continue testing if things are pushed to npm. But if the workflow becomes cumbersome for you guys, I can start pulling directly from GitHub too.

@kikuomax
Copy link
Collaborator

kikuomax commented Aug 9, 2023

@wesdevpro @mateuswetah I will make a PR from dev to main after bumping the version to 0.1.1.

@kikuomax kikuomax mentioned this issue Aug 9, 2023
Merged
wesdevpro added a commit that referenced this issue Aug 9, 2023
@kikuomax @wesdevpro
Fix "TypeError: this.$slots.default is not a function" (#18, #20) (#25)
0d04c8f 
* fix(lib): b-field-body wrapped text in b-field

- Fixes the bug that a horizontal `b-field-body` wrapped a simple text
  element with an extra `b-field`. It now returns a text element as is.

issue #5

* fix(lib): performance warning on FieldBody

- Removes a Vue runtime warning that indicated a potential performance
  issue related to how `FieldBody` gave the default slot to `Field`.
  Changes the third parameter of `h` function call to create a `Field`
  from a direct child `[element]` to a function slot `() => element`.

  This will address the issue pointed at in the comment:
  #1 (comment)

* fix(lib): remove unexpected tabindex (#9)

- Fixes the bug that `Table` ended up with `<table>` with an unexpected
  "tabindex" attribute. This bug was caused because Vue 3 no longer
  removes a boolean attribute if its value is "false". `Table` binds
  `undefined` instead of `false` to "tabindex" if `focusable` is `false`
  or not specified.

issue #8

* Publish Package @ntohq/buefy-next (#10)

* Removed CircleCi

* Created GitHub Action Workflow Files

* Added Workflow and Updated Package.json

* Update package.json (#11)

* Update Package Name to `@ntohq/buefy-next` For Publishing to NPM (#13)

* Update package.json

* Rename Package For Publishing to NPM

* Rename Package For Publishing to NPM

* Cleaned Up Workflow and Package.json

* Update package.json

* Renamed Workflow Folder

* Update npm_deploy.yml

* fix(lib): empty BMenuList crash (#21)

- Fixes the bug where an empty `BMenuList` crashed with "TypeError:
  slots.default is not a function". I found `slots.default` was
  `undefined` if `BMenuList` was empty. `BMenuList` makes sure
  `slots.default` is a function before calling it, otherwise returns
  `slots.default` as is.

issue #20

* fix(lib): empty FieldBody crash (#22)

- Fixes the bug where `FieldBody` crashed if no default slot was given.
  `FieldBody` makes sure that `this.$slots.default` is a function before
  calling it and not null before accesssing its fields. This is a
  potential cause of #18, but there might be other
  reasons.

issue #18

* chore: bump version to 0.1.1

---------

Co-authored-by: Wesley Ford <wes@wesdev.pro>
@wesdevpro
Copy link

@kikuomax can this issue be closed?

@kikuomax
Copy link
Collaborator

kikuomax commented Aug 9, 2023

@kikuomax can this issue be closed?

If @mateuswetah can confirm the errors disappear.

@mateuswetah
Copy link
Author

Later today I'll do some tests to let you guys know!

@mateuswetah
Copy link
Author

It works guys! Well done o/

@wesdevpro
Copy link

@kikuomax great job!

kikuomax added a commit to kikuomax/buefy that referenced this issue Sep 1, 2023
@kikuomax
test(lib): add test case for FieldBody
d806b9f 
- Adds a new test case for `FieldBody`, which instantiates a `FieldBody`
  without the default slot.

  This test won't pass until the issue mentioned in the following
  comment:
    - ntohq#18 (comment)

issue ntohq#1 (comment)
wesdevpro pushed a commit that referenced this issue Sep 2, 2023
@kikuomax
Port spec for Field (#57)
bef677c 
* test(lib): update FieldBody spec

- Updates the unit tests (spec) of `FieldBody` so that it can work with
  `@vue/test-utils` V2.
    - Replaces `createLocalVue` and `localVue.component` with
      `global.components` option for `mount`, because `@vue/test-utils`
      V2 no longer provides `createLocalVue`.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name`, because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm`, because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Renames `propsData` to `props`, because `propsData` works but was
      removed from the API doc on `@vue/test-utils` V2.

- NOTE: the tests won't pass unless we fix the issue #5.

issue #1

* test(lib): update Field spec

- Updates the unit tests (spec) of `Field` so that they can work with
  Vue 3 and `@vue/test-utils` V2:
    - Replaces `localVue` with `global.components` option for `mount`
      and `shallowMount` because `createLocalVue` no longer exists in
      `@vue/test-utils` V2.
    - Changes the definition of the test
      "messages are passed down to the message slot" due to the
      difference between Vue 2 and 3 in how it stringifies an array in a
      template expression.
    - Awaits `wrapper.setProps` to make sure the subsequent tests will
      verify the updated state.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.
    - Replaces `propsData` option for `shallowMount` and `mount` with
      `props` because `propsData` might be deprecated in the future.
    - Refreshes the snapshot. I did not see any problems in the new
      snapshot.

issue #1

* test(lib): add test case for FieldBody

- Adds a new test case for `FieldBody`, which instantiates a `FieldBody`
  without the default slot.

  This test won't pass until the issue mentioned in the following
  comment:
    - #18 (comment)

issue #1 (comment)

* test(lib): update FieldBody spec

- Fixes an assertion that tested nothing:
  `exists` → `findComponent` + `exists`

issue #1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mateuswetah @kikuomax @wesdevpro