Я использую пользовательское приложение Vue SSR, которое примерно соответствует примеру в официальном руководстве. Я попытался установить paper.js в него, и я получаю следующие ошибки, которые полностью воспроизводятся на этой ссылке Pastebin :
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", но это ничего не делает, чтобы заставить меня замолчать предупреждения и ошибки.
Что здесь происходит? Почему импорт оценивается вообще, если он не будет предварительно отображаться на сервере? Я попытался решить эту проблему путем установки соответствующих библиотек, но это целое «гнездо шипов»: веб-пакет жалуется, что не может оценить некоторый специфичный для узла код, особенно в node-canvas, и все решения, которые я пробовал упал. (Я бы хотел, чтобы этот код был изоморфным, но я искренне боюсь запрыгнуть в эту кроличью нору, недостаточно зная о webpack, и учитывая недостаток документации по запуску paper.js в узле.)
Рабочий пример можно найти на моем Github для целей отладки.
Примечание: если все скомпилируется нормально, откройте ./src/page/Index.vue, повторно сохраните его, и должна появиться ошибка - это еще одна странность, которая продолжает происходить. Время от времени при сохранении, webpack выплевывает чистый зеленый и говорит, что все хорошо, только чтобы испугаться при следующем спасении.
Кроме того, вопреки тому, что я читал в другом месте, проблема, похоже, не имеет ничего общего с самим веб-пакетом, потому что импорт paper в проект веб-пакета только на стороне клиента не работает.