Почему Vuetify поломал транспайлинг и как восстановить?

Доброго дня.
Поставил Vuetify в существующий проект посредством vue-cli версии 3.х. Подключил все по инструкции. С гуями не заморачивался, просто сделал `vue add vuetify` и далее добавил Vue.use(Vuetify) в entrypoint.

Проблема в том, что после этого что-то поломалось. Я использую vue-property-decorator, и эти самые декораторы перестали проходить при сборке. Система начала ругаться, что не модуль не может быть распарсен ввиду символа "@" перед декоратором. При этом я смотрел git diff, в файлах проекта ничего изменено не было. Ни .tsconfig, ни vue.config.js, ни babel.config.js, ни в package.json ничего ненужного. Пробовал удалять node_modules, yarn.lock и устанавливать зависимости заново.

Подчеркну, что до установки vuetify все работало. В зависимостях есть поддержка TypeScript, в самом .tsconfig есть "experimentalDecorators", есть соотв. пресеты для babel, есть babel/polyfill.

Сделал вывод, что Vuetify что-то не то намешал в финальный конфиг вебпака, который, как вам, может быть, известно, собирается из дефолтных кусков посредством api.chainWebpack во всех участвующих в сборке модулях. Ибо в стэк-трейсе ошибки парсинга указывается `vuetify-loader`.

Сейчас ищу способы ситуацию разрулить, как - пока не знаю. Учитывая, что конкретные причины мне неизвестны, залез в node_modules/@vue/cli-service и дебажу, думаю создать проект заново уже на vuetify или же как-то написать свой webpack.config.js, отказавшись от vue-cli-service. Но хочется все же понять суть и решить проблему правильно.

Как быть, что делать? Кто сталкивался?
Заранее благодарен.
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
Heian
@Heian Автор вопроса
Ашот
Причина была во vuetify-loader, точнее, в том конфиге, который он вставлял в пайплайн через api.chainWebpack. Поскольку в данном лоадере нет никакого толка (ничего экстраординарного это поделие не делает, у нас чистый ts и scss, которые отлично обрабатываются менее хипстерскими лоадерами), проще отказаться от vue-cli и, поудаляв vue-cli-vuetify-helper \ vuetify-loader (к слову, он ломает еще и JSX), оставить только vuetify.

После удаления проблемного пакета (vuetify-loader) проект собирается, как и должен. А всем тем, кто хочет добавить vuetify в свой проект, но опасается неадеквата, совет: забить на документацию и просто поставить пакет при помощи `yarn add vuetify`. Все.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы