CODEWITHSUNDEEP
javascriptvue.jsbuefy
morph3us
morph3us

Reputation: 228

Updating package (buefy) breaks project (filegator) - import issues(?)

I am trying to add some features to filegator, a self hosted file storage.
(The project is organized as single-file components, if that is of any relevance.)
(It is based on Vue,js and runs as a Node.js server, with babel)
For this, I want to update the used buefy version, to utilize some newer features.
One of the intermediate version was code breaking, the suggested solution was however already implemented:

If you check here, it suggests to

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

It already did this, while using a version that was before the breaking changes, in filegators main.js, lines 1, 5 and 25.
However, I still get the following error message: I already tried to import buefy the same way in the Browser.vue, which contains the b-table that throws the error, but it didnt help. (Was I on the right track, do I need to import packages in each component seperately?)

What confuses me even more is that the article informing about the breaking changes suggests to

import { Table } from 'buefy'

while the official documentations code uses

b-table

However, I can not import individual components with hyphens in their name. That throws its own errors.
I feel this should probably be pretty easy and I am overlooking something obvious. Could someone please point me in the right direction?
Thank you! :)

Upvotes: 2

Views: 158

Answers (1)

Michal Levý
Michal Levý

Reputation: 37773

I do not think this is import issue as that would probably lead to an app not building at all. But your error message is from the browser where app is already loaded and executing.

  1. The breaking change in v0.8.0 is only for imports of individual components. What the docs say is that you can import and install all Buefy components at once (Vue.use(Buefy); ....usually in main.js) or just install and use only selected components. As filegator is using the 1st option, this is not a change causing your problems...

  2. By the looks of the error and stack trace, it seems the problem is rather in the breaking change in version v0.9.0 where the BTable component default slot and table column syntax changed

Old syntax:

<b-table :data="myData">
    <template slot-scope="props">
        <b-table-column field="name" label="Name">
            {{ props.row.name }}
        </b-table-column>
        <b-table-column field="age" numeric label="Age">
            {{ props.row.age }}
        </b-table-column>
    </template>
</b-table>

New syntax:

<b-table :data="myData">
    <b-table-column field="name" label="Name" v-slot="props">
        {{ props.row.name }}
    </b-table-column>
    <b-table-column field="age" label="Age">
        <template v-slot:default="props">
            {{ props.row.age }}
        </template>
    </b-table-column>
</b-table>

Upvotes: 1

Related Questions