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

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'

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 27 (20 by maintainers)

Most upvoted comments

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

Use @vue/composition-api@0.6.7 (version 0.6.7) instead:

yarn add @vue/composition-api@0.6.7

# or
npm install @vue/composition-api@0.6.7 --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.

phatj on Jul 11, 2020

When using vite, this produces a build error:

philipimperato on May 4, 2021

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/ })],
};

GaborTorma on Sep 4, 2020

Same problem, please release the fixed version. Thanx!

TeleMediaCC on Aug 17, 2020

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.

marshallswain on Jul 14, 2020

@philipimperato I don’t believe so. I can do a quick patch release if somebody wants to update the code to only work with the latest @vue/composition-api. I think that’s all that needs to happen at this point.

@marshallswain I went ahead and opened up a PR #612 with a simple patch to fix this in case you want to take a look.

I’d appreciate it, since this is causing errors for vite builds. Thanks!

miguelrk on Nov 11, 2021

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. 😉

marshallswain on Sep 3, 2020

Screen Shot 2020-09-03 at 11 23 51 AM

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

marshallswain on Sep 3, 2020

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'

GaborTorma on Sep 3, 2020

@GaborTorma try installing @vue/composition-api@12.2.3, which I just published with this change:

Screen Shot 2020-09-03 at 11 13 10 AM

The warning about peerDeps should be fixed.

marshallswain on Sep 3, 2020

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

GaborTorma on Sep 3, 2020

@TeleMediaCC I just updated one of my apps from @vue/composition-api@0.6.7 to @vue/composition-api@1.0.0-beta.11 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 on Sep 2, 2020

I still get the WARN on installing:

npm WARN feathers-vuex@3.12.0 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"

TeleMediaCC on Sep 2, 2020

Ty! @phatj

Peras795 on Jul 11, 2020