Importing in Vue 2.5+ and Webpack 4 requires VueGoodTable.default in Vue.use()

[AndersSchmidtHansen]

Issue Type (delete the irrelevant ones)

• Question

Specs

"vue": "^2.5.16"
"vue-loader": "^15.2.6"
"webpack": "^4.16.3"

What browser?
Chrome

Expected Behavior

Expected to not having to write Vue.use(VueGoodTable.default) instead of the usual Vue.use(VueGoodTable).

Actual Behavior

Console errored with

Unknown custom element: <vue-good-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Steps to Reproduce the Problem

Please detail your steps here

1. Upgrade Vue to 2.5+ with vue-loader at least version 13.0.0. Update to Webpack 4.
2. vue-good-table fails to render unless VueGoodTable.default is used.

Question

Will it be possible to upgrade vue-good-table to avoid having to use .default when importing in Vue/Webpack projects that use vue-loader versions that are newer than 13.0.0?

You can see the issue addressed here. Evan You mentioned something like this:

"14.0+ no longer supports module.exports. Use export default instead."

It's fine for me to just use .default, but out of all my plugins used, vue-good-table is the only one that doesn't work.

Thanks for a great plugin, by the way, and thanks for all the hard work. 👍

[xaksis]

@AndersSchmidtHansen this is interesting... because vue-good-table does export default:
https://github.com/xaksis/vue-good-table/blob/master/src/index.js#L14

Did you import exactly like the installation guide?
https://xaksis.github.io/vue-good-table/guide/#installation

import VueGoodTablePlugin from 'vue-good-table';

// import the styles 
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

can you show me how you're importing the plugin?

[AndersSchmidtHansen]

@xaksis - Hmm, the import is exactly like in the installation guide. Well, I tried with both "VueGoodTablePlugin" and "VueGoodTable" as the import name, but that shouldn't make of much a difference, right?

This is how it currently looks:

import VueGoodTable from 'vue-good-table'

import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTable.default) // .default was not necessary in Webpack 3 or 2.

I'm leaning towards that it's something wrong in my Webpack 4 setup since your index.js looks perfectly fine. 🙂

I'll tinker around with it some more.

[xaksis]

Ok, I'll keep this open for now... @AndersSchmidtHansen thank you for looking into it, please let me know if you find more deets on it.

[AndersSchmidtHansen]

@xaksis - I can confirm that this was an issue with my Webpack configs when migrating from 3 to 4. Something got lost in translation.

I would consider this issue closed. All's good with vue-good-table 😉