TypeError: undefined is not an object (evaluating 'modules[moduleId].call')

ahoiroman commented 3 years ago

Hello there,

I am getting this error from time to time:

TypeError: undefined is not an object (evaluating 'modules[moduleId].call')

This is the trace back:

[Info] Download the Vue Devtools extension for a better development experience: (entry-point.js, line 32541)
https://github.com/vuejs/vue-devtools
[Warning] [vue-router] Failed to resolve async component default: TypeError: undefined is not an object (evaluating 'modules[moduleId].call') (entry-point.js, line 19387)
[Warning] [vue-router] uncaught error during route navigation: (entry-point.js, line 19387)
[Error] TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
__webpack_require__ — entry-point.js:64
./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-resize-sensor/src/resize-sensor.vue?vue&type=style&index=0&lang=css& — 7e145.65b67852a8ba98e65172.js:2153
__webpack_require__ — entry-point.js:64
./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-resize-sensor/src/resize-sensor.vue?vue&type=style&index=0&lang=css& — 7e145.65b67852a8ba98e65172.js:11404
__webpack_require__ — entry-point.js:64
./node_modules/vue-resize-sensor/src/resize-sensor.vue?vue&type=style&index=0&lang=css& — 7e145.65b67852a8ba98e65172.js:11986:300
__webpack_require__ — entry-point.js:64
./node_modules/vue-resize-sensor/src/resize-sensor.vue — 7e145.65b67852a8ba98e65172.js:11935:169
__webpack_require__ — entry-point.js:64
./node_modules/vue-pdf/src/componentFactory.js — 7e145.65b67852a8ba98e65172.js:11481:95
__webpack_require__ — entry-point.js:64
(anonyme Funktion) — 7e145.65b67852a8ba98e65172.js:12:145
./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& — 7e145.65b67852a8ba98e65172.js:33
__webpack_require__ — entry-point.js:64
./node_modules/vue-pdf/src/vuePdfNoSss.vue?vue&type=script&lang=js& — 7e145.65b67852a8ba98e65172.js:11920:195
__webpack_require__ — entry-point.js:64
./node_modules/vue-pdf/src/vuePdfNoSss.vue — 7e145.65b67852a8ba98e65172.js:11882:119
__webpack_require__ — entry-point.js:64
./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Offer/View.vue?vue&type=script&lang=js& — 2182d.45e749aab25e14f10cde.js:166:85
__webpack_require__ — entry-point.js:64
./resources/js/views/Offer/View.vue?vue&type=script&lang=js& — 2182d.45e749aab25e14f10cde.js:2179:215
__webpack_require__ — entry-point.js:64
./resources/js/views/Offer/View.vue — 2182d.45e749aab25e14f10cde.js:2143:112
__webpack_require__ — entry-point.js:64
__webpack_require__
promiseReactionJob

    abort (entry-point.js:21557)
    (anonyme Funktion) (entry-point.js:21599)
    (anonyme Funktion) (entry-point.js:21384)
    promiseReactionJob

This is how I include the module:

<template>
    ...
</template>
<script>
import pdf from 'vue-pdf'

export default {
    components: {pdf},
    data: () => ({
        pdfdata: {
            src: {},
            numPages: undefined
        },
    }),
    methods: {
        displayPDF () {
            this.generatePDF (`/api/pdf/${this.id}`).then (response => {
                let pdfdata = pdf.createLoadingTask (URL.createObjectURL (response));

                pdfdata.promise.then ((pdf) => {
                    this.pdfdata.src = pdf.loadingTask;
                    this.pdfdata.numPages = pdf.numPages;
                    this.openpdfmodal = true;
                });

            });
        }
    },
}
</script>

georgewei commented 3 years ago

I've ever met the same problem, the reason is:

I've set 'class' property to a <div> tag in the <template> setion, but the class is defined neither in <style> section nor globally. Chrome ignores the error, but some other browers (like Safari) throw an exception for lacking of the definition.

ahoiroman commented 3 years ago

Nope, this is not the problem in this case.

 <template>
<!--                            <pdf
                                :page="i"
                                :src="pdfdata.src"
                            >
                            </pdf>-->
                        </template>

If I don't use this part and do not import pdf from 'vue-pdf', the view is usable. There's something just wrong with vue-pdf I guess.

georgewei commented 3 years ago

In the template, the property 'src' of <pdf> should be a string, but you declare pdfdata.src as an object in the script, the 2 types dismatch.

ahoiroman commented 3 years ago

You are right, but this did not solve the problem:

pdfdata: {
    src: '',
    numPages: undefined
},

Error stays the same.

FranckFreiburger / vue-pdf

TypeError: undefined is not an object (evaluating 'modules[moduleId].call') #279