javascript - 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
然后运行并添加它,它就可以工作了。大部分的时间。
我不太确定从哪里开始调试。所以我的问题是:调试这个的一个好的起点是什么?
解决方案
似乎没有定义类“margined-bottom-small-default”,这是由 Chrome 引入的,但 Safari 会引发错误。
推荐阅读
- java - Java 11 中 Java 8 的 JVM Flags 的替代方案
- javascript - 是否可以在预制的 html 文件中使用单文件 Vue 组件
- javascript - jquery中的除法和求和不起作用?
- typescript - 羽毛js禁用一些方法打字稿
- symfony - Shopware 6:在自己的自定义管理模块中获取 PHP 数据
- ios - 通过 Notification 打开 App 时打开特定视图
- ansible - 如何从需要使用 Ansbile 进行身份验证的网站获取一些数据?
- json - 子表显示的MVC模型设计
- javascript - 使用 IIFE 返回 2 个对象
- c++ - 我想防止用户在提示输入时输入负值。我该如何在这段代码中解决这个问题?