1

所以我刚刚dashboard.svelte在我的原型预订管理应用程序上推出了一个新页面（

构建良好，但是在浏览器中加载任何站点时，我在控制台中收到一个奇怪的错误，这会中断所有其他 JS 的执行。

TypeError: Kn is not a function它与return Kn(t...名为的文件的部分相关联map.xxx.js：

var Kn, Xn = function (t, e) {
  return function (n, r) {
    if (null == n) return n;
    if (!qe(n)) return t(n, r);
    for (var i = n.length, o = e ? i : - 1, a = Object(n); (e ? o-- : ++o < i) && !1 !== r(a[o], o, a); );
    return n
  }
}(function (t, e) {
  return t && Qn(t, e, Pe)
}); var tr = function (t, e) {
  var n = - 1,
  r = qe(t) ? Array(t.length)  : [
  ];
  return Kn(t, function (t, i, o) {
    r[++n] = e(t, i, o)
  }),
  r
};

我花了几个小时试图找出这个错误的来源（老实说这不是很直观），并通过反复试验将其绑定回上述dashboard.svelte文件（npm run dev顺便说一下，它工作正常）

https://gist.github.com/Bandit/58500ebc473e7d8d84bfb6ae16d41ea6

我已经把我能找到的所有信息都放在了上面的要点中。我真的希望有人能对这个问题有所了解，因为我现在不得不回滚到更早的提交。

FWIW 我DateTime通过 Luxon 和lodash应用程序中其他地方的几种方法使用，没有任何问题，所以这不是第一次构建这些包。

/EDIT1 应该注意，如果我一切正常，rm src/routes/dashboard.svelte那么npm run build它完全被限制在那个文件中......

/EDIT2 注释掉以下行使dashboard.svelte一切正常：

    // import merge from 'lodash/merge';

    // const { session } = stores();
    // $session.prefs = merge({}, $session.prefs);

但这对我来说毫无意义，因为这个 EXACT 代码存在于我的应用程序的另一个页面中：

    import merge from 'lodash/merge';
    import { onMount } from 'svelte';
    import { hideAll } from 'tippy.js';
    import { numberWithOrdinal } from './_helpers.js';
    import { hasRole } from 'user.js';

    const { session } = stores();
    $session.prefs = merge({}, $session.prefs);

那么这与导入的顺序有关吗？

/EDIT3 关于下面我对调用堆栈的评论，这是触发问题的行（它位于与服务器完全不同的文件中dashboard.svelte并且在服务器上运行良好）：

    $: if (dates && availableItems && availableBookings) populateGrid();

/EDIT4 因此，经过大量调试，我们设法将其固定为lodash.sortBy. 不知道为什么这突然成为一个问题，因为我已经在应用程序的另一个页面上使用了数周而没有问题。无论如何，我现在已经删除了它的所有痕迹，一切都很好。现在（因为我不相信那是真正的问题）......

4

1 回答 1

1

由于 JavaScript 已被丑化，因此更难调试。

在你rollup.config.js禁用terser插件。（你可以把它注释掉）

然后重新运行您的构建，它应该为您提供未损坏的命名。

另一个调试技巧是编辑 JS 文件并在导致错误的行之前map.xyz.js添加一条语句。debugger然后在打开 devtools 的情况下重新运行。它将停在该行并显示调用堆栈。通过调用堆栈查看，它可能会阐明它的来源。

于 2019-12-10T07:00:13.227 回答