Question

我正在使用一个定制的Vue SSR应用程序，该应用程序大致类似于官方指南中的示例。我尝试将paper.js安装到其中，但遇到以下错误，这些错误已在this Pastebin link上全面复制：

WARNING in ./node_modules/paper/dist/node/extend.js
48:32-39 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/paper/dist/node/canvas.js
Module not found: Error: Can't resolve 'canvas' in '/Users/chaseries/Desktop/ANIMATION_FINAL_2/node_modules/paper/dist/node'

WARNING in ./node_modules/paper/dist/node/self.js
Module not found: Error: Can't resolve 'jsdom' in '/Users/chaseries/Desktop/ANIMATION_FINAL_2/node_modules/paper/dist/node'

WARNING in ./node_modules/paper/dist/node/extend.js
require.extensions is not supported by webpack. Use a loader instead.

ERROR in ./node_modules/paper/dist/node/canvas.js
Module not found: Error: Can't resolve 
'jsdom/lib/jsdom/living/generated/utils' in

令人反感的代码只是我其中一个页面的顶层的import paper from "paper";语句。该应用程序根本无法运行。

现在，这在某种程度上对我来说是有意义的：服务器端代码正在尝试使用paper.js，并且由于未满足依赖项而失败。因此，我尝试将导入移动到mounted方法的条件中，例如：

...
mounted () {
    let paper;
    if (process.browser) {
        paper = require("paper");
    }
...
}

Webpack会发出相同的警告和错误，但实际上可以编译并可以正常工作。我看过其他一些看起来很像这样的问题，它们要求"paper/dist/paper-full.js"而不是"paper"，但这并没有使我的警告和错误消失。

这是怎么回事？如果导入将不预先在服务器上进行渲染，为什么还要对其进行评估？我已经尝试过通过安装相关的库来解决问题，但这只是一个棘手的问题：webpack抱怨它无法评估某些特定于节点的代码，尤其是在节点画布中，以及我所提出的所有解决方案试过跌了。（我希望这段代码是同构的，但是老实说，我害怕跳进那个兔子洞，对webpack不够了解，并且由于在node中运行paper.js的文档很少。）

可以找到一个有效的示例on my Github进行调试。

注意：如果一切正常，请打开./src/page/Index.vue，重新保存它，然后应该出现错误-这是另一个不断发生的怪异现象。保存后，webpack会吐出纯绿色，说一切都很好，只是吓到了下一次保存。

此外，与我在其他地方读过的内容相反，该问题似乎与webpack本身无关，因为将paper导入到仅客户端的webpack项目中是没有问题的。

在Vue SSR应用程序中使用Paper.js

0 个答案: