Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createElementVNode is not a function vite #161

Open
alireza0sfr opened this issue May 31, 2022 · 6 comments
Open

createElementVNode is not a function vite #161

alireza0sfr opened this issue May 31, 2022 · 6 comments

Comments

@alireza0sfr
Copy link

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
Copy link

I have the same problem as you.

@alireza0sfr
Copy link
Author

@rwerplus did you find anything solutions?

@rwerplus
Copy link

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
Copy link
Author

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

@rwerplus
Copy link

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
Copy link

noook commented 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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants