question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createElementVNode is not a function vite

See original GitHub issue

hey there, i have a vue3+vite package and i want to use it in vue2 aswell in vue 3 everything works like a charm but in vue 2 i get “createElementVNode is not a function” error

install.ts(entry):

// @ts-ignore
import componentRegisterer from './plugins/components.ts'
// @ts-ignore
import mixins from './plugins/mixins.ts'
// @ts-ignore
// import i18n from './plugins/i18n.ts'

export default {
  install: (app: any, options: any): void => {
    app.mixin(mixins)
    componentRegisterer(app)
    // app.use(i18n)
  }
}

vite.config.js:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

// https://vitejs.dev/config/
const path = require("path")
export default defineConfig({
  test: {
    setupFiles: ['./tests/config.ts']
  },
  optimizeDeps: {
    exclude: ['vue-demi']
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/install.ts'),
      name: 'vcp',
      formats: ['umd'],
      fileName: (format) => `vcp.${format}.ts`
    },
    rollupOptions: {
      external: ['vue', 'vueI18n', 'vue-demi',],
      output: {
        exports: 'named',
        globals: {
          'vue-demi': 'VueDemi',
          'vue': 'Vue',
        }
      }
    },
  },
  plugins: [
    vue({
      style: true,
      css: true
    }),
    vueI18n({
      include: path.resolve(__dirname, 'src/assets/translations.ts'),
      globalSFCScope: true,
      compositionOnly: false,
    }),
  ],
  server: {
    port: 8080
  },
  resolve: {
    dedupe: ['vue'],
    alias: {
      "~": path.resolve(__dirname, "./src"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

package.json:

{
  "name": "vcp",
  "version": "0.9.14",
  "private": false,
  "author": "Alireza Safari <alireza.safaree@gmail.com> (http://alireza-safari.ir)",
  "license": "MIT",
  "main": "./dist/vcp.umd.ts",
  "description": "Vue Client Print with Template Builder",
  "exports": {
    ".": {
      "require": "./dist/vcp.umd.ts"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "keywords": [
    "vcp",
    "vue print",
    "vue client print",
    "template builder",
    "vue report",
    "vue report generator"
  ],
  "files": [
    "dist/*"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/alireza0sfr/vue-client-print"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest run --environment jsdom",
    "test:ui:": "vitest --environment jsdom --ui",
    "test:coverage": "vitest run --coverage --environment jsdom",
    "test:watch": "vitest --environment jsdom"
  },
  "dependencies": {
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.5",
    "jsdom": "^19.0.0",
    "print-js": "^1.6.0",
    "register-service-worker": "^1.7.2",
    "typescript": "^4.7.2",
    "vitest": "^0.12.9",
    "vue-demi": "^0.12.5",
    "vue-i18n": "^9.1.10"
  },
  "peerDependencies": {
    "vue": ">=2.0.0 || >=3.0.0"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitest/ui": "^0.12.9",
    "@vue/compiler-sfc": "^3.2.36",
    "@vue/test-utils": "^2.0.0-rc.18",
    "c8": "^7.11.3",
    "cz-conventional-changelog": "^3.0.1",
    "vite": "^2.9.9",
    "vue": "^3.2.36"
  }
}

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

1reaction
noookcommented, Oct 27, 2022

On Vue-i18n documentation you can notice there is the compatibility range on both of the versions (8, 9) pointing respectively to Vue 2+ and Vue 3+

What you’d need eventually is to install both of the package, and depending on the current version of Vue, using one or another version of the i18n library. note that you’d need to use this method as the name conflicts: https://stackoverflow.com/a/56495895/8886385

You should be able to do something like:

import Vue2i18n from 'vue-i18n-old';
import { createI18n } from 'vue-i18n';
import { isVue2 } from 'vue-demi';

let i18n;

if (isVue2()) {
  i18n = Vue2i18n
} else {
  i18n = createI18n({
    // something vue-i18n options here ...
  })
}

export default i18n;
0reactions
rwerpluscommented, Jun 30, 2022

that sucks mine is vue 3 compatible already but I want vue 2 compability too

yeah but compatibility with both V2 and V3 is cumbersome

Read more comments on GitHub >

github_iconTop Results From Across the Web

[vue3-jest] - createVNode/createElementVNode is not ... - GitHub
In my project i have just upgraded to Vue 3 and app is running normally but when i try to run tests i...
Read more >
createVNode is not a function (Vue with Laravel)
I'm trying to make a component render as per an example I found online. I created a sample project and it works fine...
Read more >
Troubleshooting - Vite
Vite cannot handle and does not support code that only runs on non-strict mode (sloppy mode). This is because Vite uses ESM and...
Read more >
Render Functions & JSX | Vue.js
This name is inherited from conventions shared by many virtual DOM implementations. A more descriptive name could be createVnode() , but a shorter...
Read more >
Uncaught TypeError: Vue.component is not a function
Uncaught TypeError : Vue.component is not a function. Hi Guys,. I'm getting an error that says "app.js:28217 ... Are you using vite or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found