I'm trying to import pdfjs into a VueJS page to get the title of the PDF file (and use it instead of the web viewer to render the PDF) but when I import PDFJS and output it to the console I get undefined.
vue file:
<template lang="pug">
q-page
iframe#pdf(:height="height" width="100%" :src="url" :class="{ 'move-up-32-px': isMobile }")
</template>
<script>
import { pdfjs } from 'pdfjs-dist/webpack'
export default {
name: 'PDFViewer',
data () {
return {
name: '',
path: '/statics/pdfjs-2.5.207-dist/web/viewer.html',
height: '',
isMobile: false
}
},
computed: {
url: function () {
return this.path + '?file=' + this.name
}
},
mounted () {
this.name = window.location.protocol + '//' + window.location.host + '/' + this.$route.params.documentURL
this.height = window.innerHeight - 82 + 'px'
if (this.$q.platform.is.mobile) {
this.isMobile = true
this.height = window.innerHeight - 50 + 'px'
}
console.log(pdfjs) \\ undefined
}
}
</script>
package.json dependencies:
"dependencies": {
"#quasar/extras": "^1.6.0",
"#vue/composition-api": "^0.3.4",
"axios": "^0.18.1",
"electron-updater": "^4.2.5",
"quasar": "^1.9.10"
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-modules-commonjs": "^7.8.3",
"#quasar/app": "^1.6.0",
"#quasar/quasar-app-extension-dotenv": "^1.0.0",
"#quasar/quasar-app-extension-icon-genie": "^1.1.3",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.1.0",
"devtron": "^1.4.0",
"electron": "^9.0.0-beta.7",
"electron-builder": "^21.2.0",
"electron-debug": "^3.0.1",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^13.1.1",
"electron-rebuild": "^1.10.1",
"eslint": "^5.10.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^5.0.0",
"image-webpack-loader": "^6.0.0",
"pdfjs-dist": "^2.6.347",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"url-loader": "^2.3.0",
"worker-loader": "^3.0.6"
}
p.s. import { pdfjs } from 'pdfjs-dist/webpack' and import pdfjs from 'pdfjs-dist/webpack' gives the same result
try the following import
import * as pdfjs from 'pdfjs-dist';
Related
I'm new to vuejs and have implemented this example:
Auth0 vuejs and api example
It works just fine, but I run into some issues when trying to merge the vuejs code to my own project.
When loading the page requiring authentication, I get this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure property 'getAccessTokenSilently' of 'Object(...)(...)' as it is undefined.
The code for my page, looks like this:
<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "#/services/message.service";
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
const message = ref("");
const getMessage = async () => {
const { getAccessTokenSilently } = useAuth0();
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
export default {
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none'))
{
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
};
</script>
<template>
<Layout>
<p id="page-description">
<span
>This page retrieves a <strong>protected message</strong> from an
external API.</span
>
<span
><strong
>Only authenticated users can access this page.</strong
></span
>
</p>
<CodeSnippet title="Protected Message" :code="message" />
</Layout>
</template>
I've tried the example from the documentation provided here enter link description here
<script>
import Layout from "../../../layouts/main.vue";
//import { getProtectedResource } from "#/services/message.service";
//import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return {
login: () => {
loginWithRedirect();
}
};
},
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) {
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
}
</script>
But still receives this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure
property 'loginWithRedirect' of 'Object(...)(...)' as it is undefined.
at setup (index.vue?4db4:11:1)
I'm registrering the plugin this way in main:
createApp(App)
.use(store)
.use(router)
.use(VueApexCharts)
.use(BootstrapVue3)
.component(VueFeather.type, VueFeather)
.use(Maska)
.use(Particles)
.use(i18n)
.use(
createAuth0({
domain: 'xyz.auth0.com',
client_id: 'secret',
redirect_uri: 'http://localhost:4040/callback',
audience: 'https://audience',
})
)
.use(vClickOutside).mount('#app');
My package.json file:
{
"name": "vuejs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#auth0/auth0-vue": "^1.0.2",
"#ckeditor/ckeditor5-build-classic": "^32.0.0",
"#ckeditor/ckeditor5-vue": "^2.0.1",
"#fullcalendar/bootstrap": "^5.10.1",
"#fullcalendar/core": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/list": "^5.10.1",
"#fullcalendar/timegrid": "^5.10.1",
"#fullcalendar/vue3": "^5.10.1",
"#j-t-mcc/vue3-chartjs": "^1.2.0",
"#popperjs/core": "^2.11.2",
"#simonwep/pickr": "^1.8.2",
"#vue-leaflet/vue-leaflet": "^0.6.1",
"#vueform/multiselect": "^2.3.1",
"#vueform/slider": "^2.0.8",
"#vueform/toggle": "^2.0.1",
"#vuelidate/core": "^2.0.0-alpha.34",
"#vuelidate/validators": "^2.0.0-alpha.26",
"#zhuowenli/vue-feather-icons": "^5.0.2",
"aos": "^2.3.4",
"apexcharts": "^3.33.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"bootstrap-vue-3": "^0.3.3",
"chart.js": "^3.7.0",
"click-outside-vue3": "^4.0.1",
"core-js": "^3.6.5",
"echarts": "^5.3.0",
"feather-icons": "^4.28.0",
"firebase": "^9.6.6",
"highlight.js": "^11.4.0",
"leaflet": "^1.7.1",
"lottie-web": "^5.8.1",
"maska": "^1.5.0",
"moment": "^2.29.1",
"node-sass": "6.0.1",
"particles.vue3": "^1.40.2",
"prismjs": "^1.26.0",
"sass-loader": "^10.2.1",
"simplebar": "^5.3.6",
"simplebar-vue3": "^0.1.5",
"sweetalert2": "^11.4.32",
"swiper": "^6.8.4",
"vue": "3.2.36",
"vue-router": "^4.0.15",
"vue-draggable-next": "^2.1.1",
"vue-easy-lightbox": "^1.3.0",
"vue-feather": "^2.0.0",
"vue-flatpickr-component": "^9.0.5",
"vue-i18n": "^9.2.0-beta.15",
"vue-prismjs": "^1.2.0",
"vue3-apexcharts": "^1.4.1",
"vue3-count-to": "^1.1.2",
"vue3-echarts": "^1.0.4",
"vue3-google-map": "^0.8.3",
"vue3-quill": "^0.2.6",
"vuevectormap": "^1.0.8",
"vuex": "^4.0.2",
"yarn": "^1.22.17"
},
"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.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Using #auth0/auth0-vue has a limitation. useAuth0 must be used in the setup hook. Read the documentation for info.
To add login to your application, use the loginWithRedirect function that is exposed on the return value of useAuth0, which you can access in your component's setup function.
<script>
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const message = ref("");
const { getAccessTokenSilently } = useAuth0();
const getMessage = async () => {
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
return {
message
}
},
...
}
</script>
<template>...</template>
I using Jest 27.5.1 with TypeScript.
When I try to test, I got these error:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'extend')
2 | <div>Hello</div>
3 | </template>
> 4 |
| ^
5 | <script lang="ts">
6 | import Vue from 'vue'
7 | export default Vue.extend({
at src/pages/test.vue:4:1
at Object.<anonymous> (src/pages/test.vue:347:3)
at Object.<anonymous> (test/test.spec.ts:4:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
files
test file(TypeScript):
import Vuetify from 'vuetify'
import { mount, createLocalVue } from '#vue/test-utils'
import test from '~/src/pages/test.vue'
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('is a Vue instance', () => {
const wrapper = mount(test, {
vuetify,
localVue,
})
expect(wrapper.vm).toBeTruthy()
})
})
jest.config.js:
module.exports = {
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/src/components/**/*.vue',
'<rootDir>/src/pages/**/*.vue',
],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['./test/setup.js'],
moduleDirectories: [__dirname, 'node_modules']
}
setup.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json:
"dependencies": {
"#babel/core": "^7.19.3",
"#nuxtjs/axios": "^5.13.6",
"consola": "^2.15.3",
"core-js": "^3.19.3",
"dotenv": "^16.0.2",
"eslint": "^8.22.0",
"eslint-plugin-import": "^2.26.0",
"nuxt": "^2.15.8",
"nuxt-typed-vuex": "^0.3.1",
"ts-loader": "8.2.0",
"typed-vuex": "^0.3.1",
"typescript": "^4.8.4",
"vue": "^2.7.10",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.10",
"vuex": "3.6.2",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.5",
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vuetify": "^1.12.3",
"#types/jest": "^27.5.2",
"#types/node": "^18.7.18",
"#typescript-eslint/eslint-plugin": "^5.35.1",
"#typescript-eslint/parser": "^5.35.1",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.5.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.2.0",
"husky": "^8.0.1",
"jest": "^27.5.1",
"lint-staged": "^12.1.7",
"postcss-html": "^1.3.1",
"prettier": "^2.7.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"ts-jest": "^27.1.5",
"vue-jest": "^3.0.7"
}
What do I have to do to run the test correctly?
I don't know how to solve this problem myself, as it worked fine when I ran the same code in other environments.
Thank you for your help.
Mh seems the Vue instance cannot be reached. I'm also using vuetify with jest test and it look quite same. Also same as in the documentation by vuetify here https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests
The only difference I see is that the createLocalVue() initialization is outside of describe() in your case.
Try it like
describe('Index', () => {
let vuetify: Vuetify
const localVue = createLocalVue()
...
Instead of
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
...
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 have a problem with fire the Jest tests for the Nuxt/Vue components. Last day i connected all that need for test, and had resolve many errors with jsdom and babel issues, but can't resolve problem with Vue component.
The error is
TypeError: Cannot read property 'child' of undefined
4 | describe('Компонент Counter', () => {
5 | test("renders properly", () => {
> 6 | const wrapper = shallowMount(Greeting); // or mount - it's doesn't metter
| ^
7 | console.log(wrapper);
8 | });
9 |
My comoponent Greeting
<template>
<div> Hello World! </div>
</template>
<script>
export default {
name: 'Greeting'
};
</script>
My Greeting.spec.js
import {mount, shallowMount} from '#vue/test-utils';
import Greeting from '../../components/Greeting.vue';
require('jsdom-global')();
describe('Компонент Counter', () => {
test("renders properly", () => {
const wrapper = shallowMount(Greeting);
console.log(wrapper);
});
});
jest.config.js
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
};
package.json
"scripts": {
"test": "jest"
},
"devDependencies": {
"#nuxt/test-utils": "^0.2.2",
"#types/jest": "^27.0.3",
"#vue/cli-plugin-babel": "^4.5.15",
"#vue/test-utils": "^1.3.0",
"#vue/vue2-jest": "^27.0.0-alpha.4",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^27.4.5",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"jest": "^27.4.5",
"jsdom-global": "^3.0.2",
"node-sass": "^4.7.2",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^6.0.7",
"ts-jest": "^27.1.2",
"vue": "^2.6.14",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.14",
"vueify": "^9.4.1"
}
So the answer is that Jest have an attribute for working with JSDOM and i don't need an additional requires.
i just add in jest.config.js single line in the bottom
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
testEnvironment: 'jsdom'
};
I am trying to use Vue Single File Components with a Gulp build system.
Gulp should transform the files with Vueify and Babel, but neither of them are transforming arrow functions.
package.json
{
"dependencies": {
"#babel/cli": "7.4.4",
"#babel/core": "7.4.5",
"#babel/plugin-transform-arrow-functions": "7.2.0",
"#babel/plugin-transform-runtime": "7.4.4",
"#babel/preset-env": "7.5.2",
"#babel/runtime": "7.5.2",
"#vue/babel-preset-app": "3.7.0",
"babelify": "10.0.0",
"browserify": "16.2.3",
"core-js": "3.1.4",
"gulp": "4.0.1",
"gulp-babel": "8.0.0",
"gulp-concat": "2.6.1",
"gulp-jshint": "2.1.0",
"gulp-nodemon": "2.4.2",
"gulp-sass": "4.0.2",
"gulp-sourcemaps": "2.6.5",
"gulp-uglify": "3.0.2",
"gulp-watch": "5.0.1",
"node-sass": "4.11.0",
"regenerator-runtime": "0.13.2",
"uglifyify": "5.0.1",
"vinyl-buffer": "1.0.1",
"vinyl-source-stream": "2.0.0",
"vue": "2.6.10",
"vue-script2": "2.1.0",
"vueify": "9.4.1"
},
"engines": {
"node": "11.12.0",
"npm": "6.9.0"
},
}
gulpfile.js
gulp.task('script:' + pageName, function(done) {
var b = browserify(__dirname + '/public/js/vue/entry/'+pageName+'.js', {
debug: true, standalone: 'Bundle'
});
return b
.transform(vueify)
.transform('babelify', {
presets: ['#babel/preset-env', '#vue/babel-preset-app'],
plugins: ['#babel/plugin-transform-arrow-functions']
})
.bundle()
.pipe(source(pageName + '.min.js'))
.pipe(buffer())
.pipe(gulp.dest(paths.js.output));
done();
});
myPage.vue
<script>
module.exports = {
data: ()=>{
return {};
}
}
</script>
The output inside myPage.min.js
module.exports = {
data: ()=>{
return {};
}
}
Notice the arrow function did not get transformed.