首页 > 解决方案 > TypeError: undefined is not an object (评估 'modules[moduleId].call')

问题描述

我正在使用vue-pdf来呈现由 api 生成的 PDF。

这就是我这样做的方式:

<template>
    <div>
        <div v-if="generated">
            <div v-for="i in pdfdata.numPages" :key="i" class="margined-bottom-small-default">
                <pdf
                    :page="i"
                    :src="pdfdata.src"
                >
                </pdf>
            </div>
        </div>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'

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

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

                })
            }
        },
    }
</script>

这工作正常。大多数时候。但是如果我重新运行nom run dev,我经常在页面视图中得到这个错误:

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

这是堆栈跟踪:

[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/MyView/View.vue?vue&type=script&lang=js& — 2182d.45e749aab25e14f10cde.js:166:85
__webpack_require__ — entry-point.js:64
./resources/js/views/MyView/View.vue?vue&type=script&lang=js& — 2182d.45e749aab25e14f10cde.js:2179:215
__webpack_require__ — entry-point.js:64
./resources/js/views/MyView/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

如果我vue-pdf从此视图中删除,npm run watch然后运行并添加它,它就可以工作了。大部分的时间。

我不太确定从哪里开始调试。所以我的问题是:调试这个的一个好的起点是什么?

标签: javascriptvue.jswebpackvuejs2

解决方案


似乎没有定义类“margined-bottom-small-default”,这是由 Chrome 引入的,但 Safari 会引发错误。


推荐阅读