createElementVNode is not a function vite
See original GitHub issuehey 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:
- Created a year ago
- Reactions:1
- Comments:6
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:
yeah but compatibility with both V2 and V3 is cumbersome