Использование Vue Design System в Nuxt вызывает ошибки при экспорте в system.js - PullRequest
Новая
       12

Использование Vue Design System в Nuxt вызывает ошибки при экспорте в system.js

0 голосов
/ 25 июня 2018

Я пытаюсь импортировать компоненты в проект Nuxt, выполнив следующие действия: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module

У Nuxt нет main.js (все основано на плагинах), поэтому я создал «плагин», а затем выполните импорт кода там примерно так (Nuxt рекомендует это и для других библиотек и работает нормально. ):

вя-дизайн-system.js 

import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'

Vue.use(system)

Затем в моем конфиге я делаю (убрал другой код из конфига):

nuxt.config.js 

module.exports = {
  css: [
    { src: 'fp-design-system/dist/system/system.css', lang: 'css' }
  ],
  plugins: [
    { src: '~plugins/vue-design-system', ssr: true }
  ]
}

Когда я запускаю npm run dev в моей теме, она строится, но я получаю предупреждение:

WARNING Скомпилировано с 1 предупреждением в ./plugins/vue-design-system.js 7: 8-14 «экспорт по умолчанию» (импортируется как 'system') не найден в 'fp-design-system'

Кажется, есть проблема с сгенерированным system.js относительно экспорта (команда npm run build:system).

На моей странице на экране я получаю следующую ошибку при попытке использовать компонент в системе проектирования:

NuxtServerError Не удается найти модуль 'fp-design-system / src / elements / TextStyle' из '/ Users / paranoidandroid / Документы / сайты / Nuxt-SSR'

Если я сильно обновлю страницу, то получу другое сообщение:

Функция визуализации NuxtServerError или шаблон не определены в компоненте: анонимный

Есть идеи, что здесь происходит? Было бы здорово, если бы это как-то заработало.

В настоящее время я не уверен, является ли это проблемой Nuxt или проблемой Vue Design System. Я думаю, что последнее, просто потому, что у меня прямо сейчас есть настройка Nuxt, очень скудная ... так что это не является чем-то другим, вызывающим это.

Спасибо.

Репозиторий на GitHub:

Вот репозиторий для моей «темы», но для этого вам нужно создать отдельную систему дизайна с таким же именем и выполнить шаги, чтобы использовать систему дизайна как локальную (файл). ) Модуль NPM.

https://github.com/michaelpumo/Nuxt-SSR

console.log системы (из оператора импорта JS)

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Похоже, Vue ищет шаблон ES6 для импорта модуля, который вы должны использовать для внешних модулей / файлов javascript.

в ES6 это 

export default myModule

в ES5 это было 

module.exports = myModule

Надеюсь, это поможет.

0 голосов
/ 28 июня 2018

Что касается вашей первой ошибки (""export 'default' (imported as 'system') was not found in 'fp-design-system'"), JS, созданный UMD из vue-design-system, не экспортирует объект "по умолчанию". Но вы можете просто обойти проблему, импортировав ее как: 

import * as system from 'fp-design-system'

вместо: 

import system from 'fp-design-system'

Затем, как вы заметили в своих комментариях, быстро возникает другая проблема: "window is not defined", снова из-за встроенного в UMD JS, который ожидает, что window будет доступен глобально, вместо обычного трюка для использования this (который равно window в браузере). Следовательно, сборка несовместима с SSR.

Однако вы можете слегка переделать построенный JS, заменив первое вхождение window на this, но я не уверен, что результат все равно будет работать.

Скорее всего, вам лучше оставить этот модуль только для клиентского рендеринга.

...