Feathers-vuex: FeathersVuexPagination.js: export 'createElement' was not found in '@vue/composition-api

[tvld]

Steps to reproduce

Fresh, new install in Nuxt 2.1:

// plugins/featers-client
import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'

import { CookieStorage } from 'cookie-storage'

let API_URL = 'https://app.bligson.com/api'

if (window.location.hostname === 'localhost') {
  API_URL = 'http://localhost:3030'
}

const socket = io(API_URL, {
  transports: ['websocket']
})

const storage = new CookieStorage()

const feathersClient = feathers()
  .configure(socketio(socket))
  .configure(auth({ storage }))

export default feathersClient

And then:

// store/auth.js
import feathersVuex from 'feathers-vuex'
import feathersClient from '@/plugins/feathers-client'

const {
  service,
  auth,
  FeathersVuex
} = feathersVuex(feathersClient, {
  idField: '_id'
})

export default {
  service,
  auth,
  FeathersVuex
}

First attempt I get warning I need to install @vue/composition-api Was not clear from docs, but npm install save ....

But now I am stuck after:

 ./node_modules/feathers-vuex/dist/FeathersVuexPagination.js                                                                                                                                                                                                                                                                       friendly-errors 12:20:52

"export 'createElement' was not found in '@vue/composition-api'   

[phatj]

@tvld, the composition API entered beta status and broke a couple of things.

Use @vue/[email protected] (version 0.6.7) instead:

yarn add @vue/[email protected]

# or
npm install @vue/[email protected] --save

The createElement function that was imported has been aliased to just h as a convention (see: here)

Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX. Starting with version 3.4.0 of the Babel plugin for Vue, we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions), declared in ES2015 syntax that has JSX, so you can drop the (h) parameter. With prior versions of the plugin, your app would throw an error if h was not available in the scope.

[Peras795]

Ty! @phatj

[tvld]

Thank you. Did not test yet, as for now we skipped -vuex for feathers, but will mark closed ;)

[Peras795]

Thank you. Did not test yet, as for now we skipped -vuex for feathers, but will mark closed ;)

In my case, upgrading the package composition-api to the latest version, fixed the warning/error message.

[J3m5]

The V1 beta 1 version of the composition-api library has introduced a breaking change by renamming the createElement function to simply h.
rename createElement to h (#400)

And feathers-vuex use it in the pagination component here

So it would need to be updated in order to reflect that change and set the minimum version of the library t this beta 1 release.
Maybe we should wait until the stable release is out in case there are others breaking changes ?
What do you think @marshallswain ?

[tvld]

Can't you, for the time being, just accept _both_ h and createElement ?

[marshallswain]

If it's possible to make it flexibly handle both, that's definitely the best solution for right now. @J3m5 the people working on the composition api have been actively making it match vue-next, so I think it will be fine to make the updates. We can release it as a minor. I'll outline the details in the release notes.

[TeleMediaCC]

Same problem, please release the fixed version.
Thanx!

[marshallswain]

@TeleMediaCC thanks for the reminder

[marshallswain]

This should be fixed in the just-released [email protected]. Please reopen this if you find an issue.

[TeleMediaCC]

I still get the WARN on installing:

npm WARN [email protected] requires a peer of @vue/composition-api@^0.6.1 but none is installed. You must install peer dependencies yourself.

...and now get a new error when runing:

WARN  in ./node_modules/feathers-vuex/dist/FeathersVuexPagination.js
"export 'createElement' (imported as 'baseCreateElement') was not found in '@vue/composition-api'

"@vue/composition-api": "=1.0.0-beta.11"

[marshallswain]

@TeleMediaCC I just updated one of my apps from @vue/[email protected] to @vue/[email protected] and it's working in both cases. Just to make sure, I'm testing pages that use the FeathersVuexPagination component. I'm going to try another app, but if you can maybe share a repo that would be great.

[marshallswain]

I have now successfully updated two applications and 16 separately-published packages all using @vue/composition-api and feathers-vuex and have had zero issues so far. At this point a repo seems necessary to assist any further.

[GaborTorma]

Did you use "@vue/composition-api": "=1.0.0-beta.11" and "feathers-vuex": "=3.12.2"?

[marshallswain]

@GaborTorma Yes. That exact combo on two apps and 16 packages. I'm using a standard Vue CLI setup on both apps and Storybook in a monorepo for the other packages.

[GaborTorma]

I don't understand it. Your release still contains it:

"peerDependencies": {
    "@vue/composition-api": "^0.6.1"
  }

[marshallswain]

@GaborTorma try installing @vue/[email protected], which I just published with this change:

The warning about peerDeps should be fixed.

[GaborTorma]

You still import createElement from @vue/composition-api in vuex-pagination, but later then version 1.0 it does not contains it. Is completly removed and renamed for h.

import {
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  createElement as baseCreateElement,
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  h,
  computed,
  watch
} from '@vue/composition-api'

[marshallswain]

The code rewrites the createElement variable to be whichever import is actually available.

[marshallswain]

Just to be clear, I'm still seeing the warning in the console. The functionality will work as expected. If you get too caught up on the warnings, you might not get any work published. ;)

[GaborTorma]

Thanx! I understand it.

I found a package for removing warn: https://github.com/markogresak/ignore-not-found-export-webpack-plugin

module.exports = {
  plugins: [new IgnoreNotFoundExportPlugin({ include: /FeathersVuexPagination/ })],
};