I am trying to create an ionic-vue app following this post but I get Cannot convert undefined or null to object error, when I register #ionic/vue plugin in main.js.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Ionic from '#ionic/vue'
import '#ionic/core/css/ionic.bundle.css'
Vue.use(Ionic)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Package.json
"dependencies": {
"#ionic/core": "^4.6.2",
"#ionic/vue": "0.0.4",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
It seems to be a problem with ionicons. According to this thread adding ionicons#4.5.9-1 fixes the issue.
Related
I am new to VueJs and working on migrating existing app from vue2 to vue3.
I did all steps mentioned on Vue's migration doc still facing this issue.
Let me know if I am missing something here.
package.json
"dependencies": {
"vue": "^3.1.0",
"vue-router": "^4.0.0",
"vuex": "^4.0.0",
"#vue/compat": "^3.1.0",
"#vue/runtime-core": "^3.2.37"
... and other deps
},
devDependencies: {
"#vue/cli-plugin-babel": "4.5.0",
"#vue/cli-plugin-eslint": "4.5.0",
"#vue/cli-service": "4.5.0",
"#vue/compiler-sfc": "^3.1.0",
"vue-loader": "^16.0.0"
...& other depns
}
main.js
import Vue, {createApp, configureCompat } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n';
import localdev from './localdev.js'
configureCompat({
OPTIONS_BEFORE_DESTROY: false,
WATCH_ARRAY: false,
RENDER_FUNCTION: false,
CUSTOM_DIR: false,
INSTANCE_EVENT_EMITTER: false,
ATTR_FALSE_VALUE: false
});
const app = createApp(App);
app.use(router);
app.use(i18n.i18n);
app.use(store);
app.mount('#app');
Getting this error in browser console.
We are introducing Jest to an existing project.
However, I wrote an example test code.
The above error occurred.
ReferenceError: Vue is not defined
1 | import User from "../components/modal/ad/AdAdd";
> 2 | import { mount } from "#vue/test-utils";
| ^
3 |
4 | describe("user component", () => {
5 | let wrapper;
How can I solve this??
//User.test.js
import User from "../components/modal/ad/AdAdd";
import { mount } from "#vue/test-utils";
describe("user component", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(User);
});
test("render", () => {
expect(wrapper.vm.oSid).toBe(0);
});
});
export default {
data() {
return {
Sid: 0,
deleteList: [],
};
},
//package.json
"dependencies": {
"eslint-plugin-jest": "^26.2.2",
"vue": "^2.6.11",
"vuetify": "^2.4.0",
"vuex": "^3.4.0",
},
"devDependencies": {
"#babel/core": "^7.18.0",
"#babel/preset-env": "^7.18.0",
"#types/jest": "^27.5.1",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "^3.0.5",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^2.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^28.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"speed-measure-webpack-plugin": "^1.5.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "~2.4.0",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
I just mounted it, but it says the view is undefined. I don't know how to solve it.
What's wrong??
I haven't been able to solve the above error for several days.
I want to solve it.
Any help would be appreciated.
I had the same error with vue3 and jest v.28, what solved it was to add
testEnvironmentOptions: {
customExportConditions: ["node", "node-addons"],
},
into jest.config.js.
You are using Vue version 2 with #vue/test-utils 2.0.0 which is for Vue version 3.
You can find the correct #vue/test-utils version for Vue 2 here
I create project using vue-cli and install vuetify using
vue-cli.
I create a folder called sass in my src directory with a file named variables.scss.
Documentation says (https://vuetifyjs.com/en/features/sass-variables/):
The vuetify-loader will automatically bootstrap your variables into
Vue CLI’s compilation process, overwriting the framework defaults.
My files:
src\plugins\vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
src\scss\variables.scss
$body-font-family: Arial, serif;
$border-radius-root: 6px;
$font-size-root: 10px;
src/App.vue
<template>
<v-app>
<v-app-bar app color="primary" dark>
<v-btn>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
//
}),
};
</script>
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount("#app");
package.json
...
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#mdi/font": "5.9.55",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"roboto-fontface": "*",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "~2.4.5",
"vue-template-compiler": "^2.6.11"
}
...
I don't have any effect for my vuetify css, what's wrong?
The automatic loading of global Vuetify variables requires using vuetify-loader instead of the full bundle of Vuetify (which you appear to be using in plugins/vuetify.js).
Your Vuetify setup should look similar to this:
// plugins/vuetify.js
import Vue from 'vue'
// ❌
//import Vuetify from 'vuetify'
//import 'vuetify/dist/vuetify.min.css'
// ✅
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({/* options */})
However, the easiest solution might be to re-run the Vuetify command (vue add vuetify), and choose Yes for Use a-la-carte components? (this is the step that sets up vuetify-loader). The command would edit your files and install the required dependencies to enable vuetify-loader.
demo
My components are rendering to the client page exactly as written in BootstrapVue, so I'm seeing <b-button> literally rendered to the client page:
<b-button data-v-3d7e72245 id="myBtn" variant="outline-primary">Click Me</b-button>
Shouldn't this be converted into standard HTML during the Vue render process and have the bootstrap classes added automatically?
I'm new to Vue, so I could be missing something obvious - but I'm not seeing any errors when running 'npm run build' in the command line, or in the web console/Vue dev tools.
Header.vue:
<template>
<header id="Header">
<ApplyBtn btnText="Click Me" />
</header>
</template>
<script>
import ApplyBtn from './header/ApplyBtn.vue'
export default {
name: 'Header',
components: {
ApplyBtn
}
}
</script>
Main.js:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer'
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '/scss/global/duo-theme.scss'
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.config.devtools = true
Vue.config.productionTip = false
// Custom widgets
Vue.component('applybtn', require('./components/global/header/ApplyBtn.vue').default);
window.Vue = Vue;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Package.json:
{
"name": "VueBS",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"acorn": "^8.1.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.10.0",
"css-loader": "^5.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"intersection-observer": "^0.12.0",
"jquery": "^1.12.4",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"typescript": "^4.2.3",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.3",
"vuetify": "^2.4.9"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-service": "^4.5.12",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "^5.3.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0",
"webpack": "^4.46.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try placing your Vue.use before you create your Vue instance.
Change this
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
To this
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App');
When i normal start my app (npm run serve) it's all right. But when i want start Unit testing with Jest, the console gives me an error:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Can someone help me?
plugins/vuetify.ts
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json
"dependencies": {
"#vue/composition-api": "^1.0.0-rc.5",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vuetify": "^2.4.0",
"webpack": "^4.45.0",
"webpack-assets-manifest": "^4.0.1"
},
"devDependencies": {
"#mdi/font": "^5.9.55",
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-jest": "^4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^1.0.3",
"eslint": "^6.7.2",
"eslint-formatter-gitlab": "^2.2.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0-beta.4",
"node-sass": "^4.12.0",
"prettier": "^2.2.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
Probably you aren't creating a correct Vue instance in your unit test. Take a look at vuetify website, there is a section about unit testing where they explain how to add vuetify to a localVue instance
I think that i creating Vue instance correctly, i don't see error.
top-filter.spec.ts:
import TopFilter from '#/layout/TopFilter.vue'
import Vuetify from 'vuetify'
import { shallowMount, Wrapper, createLocalVue } from '#vue/test-utils'
import Vue from 'vue'
describe('topFilter.vue', () => {
let vuetify: Vuetify, wrapper: Wrapper<Vue>
beforeEach(() => {
const localVue = createLocalVue()
vuetify = new Vuetify()
wrapper = shallowMount(TopFilter, {
localVue,
vuetify
})
})
it('renders', () => {
expect(wrapper.exists()).toBe(true)
})
})