createElementVNode is not a function vite

[alireza0sfr]

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 <[email protected]> (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"
  }
}

[rwerplus]

I have the same problem as you.

[alireza0sfr]

@rwerplus did you find anything solutions?

[rwerplus]

No! it seems that the author is busy with other work and has not been fixed yet. I plan to write in vue3 first.

[alireza0sfr]

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

[rwerplus]

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

[noook]

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;