A
A
Alexey Nikolaev2019-09-28 17:28:03
Vue.js
Alexey Nikolaev, 2019-09-28 17:28:03

Why did Vuetify break transpiling and how to fix it?

Good day.
Installed Vuetify in an existing project using vue-cli version 3.x. I connected everything according to the instructions. I didn't bother with GUIs, I just did `vue add vuetify` and then added Vue.use(Vuetify) to the entrypoint.
The problem is that after that something broke. I'm using vue-property-decorator and those same decorators stopped coming through on build. The system began to swear that a module could not be parsed due to the "@" character in front of the decorator. At the same time, I looked at git diff, nothing was changed in the project files. No .tsconfig, no vue.config.js, no babel.config.js, no unnecessary stuff in package.json. Tried deleting node_modules, yarn.lock and reinstalling dependencies.
I emphasize that everything worked before installing vuetify. There is TypeScript support in the dependencies, in the .tsconfig itself there are "experimentalDecorators", there are resp. presets for babel, there is babel/polyfill.
I concluded that Vuetify did something wrong in the final webpack config, which, as you may know, is assembled from default pieces using api.chainWebpack in all modules involved in the assembly. For the stack trace of the parsing error indicates `vuetify-loader`.
Now I'm looking for ways to resolve the situation, how - I don't know yet. Given that I don’t know the specific reasons, I got into node_modules / @ vue / cli-service and debugged, I think to create a new project already on vuetify or somehow write my own webpack.config.js, abandoning vue-cli-service. But I still want to understand the essence and solve the problem correctly.
How to be, what to do? Who faced?
Thanks in advance.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Nikolaev, 2019-09-28
@Heian

The reason was in the vuetify-loader, more precisely, in the config that he inserted into the pipeline via api.chainWebpack. Since there is no sense in this loader (this part does nothing extraordinary, we have pure ts and scss, which are perfectly processed by less hipster loaders), it is easier to abandon vue-cli and remove vue-cli-vuetify-helper \ vuetify-loader (by the way, it also breaks JSX), leave only vuetify.
After removing the problematic package (vuetify-loader), the project builds as it should. And to all those who want to add vuetify to their project, but are afraid of being inadequate, advice: forget about the documentation and just install the package using `yarn add vuetify`. All.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question