Using class based components with lang=ts alongside lang=js

Question

I have a vue project thats using class based components. I want to have one component that uses js language and not typescript.

Vue complains I need a new loader, and I cannot figure out how to add it.

I am using vue-cli, I dont have a webpack.config.js but I do have a standard vue.config.js

With vue-cli inspect --plugins, I have the following plugins, including vue-loader

[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'html',
  'pwa',
  'preload',
  'prefetch',
  'copy',
  'fork-ts-checker'
]

Yet vue complains in components without <script lang="ts">:

Module parse failed: Unexpected character '@' (6:0)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import Component from 'vue-class-component';
| 
> @Component
| export default class TreeNavigation extends Vue {

Basically, I want to have <script lang="ts"> alongside components with regular <script><script> or <script lang="js">

Are you trying to use vue-class-component in a js component? — Steven B.
@StevenB. Yes. Would that be a problem? Checking the docs of vue-class-component, they show only js examples. It stills errors the same if I import from vue-property-decorator. — zer0lis
Hmm just a question. I don't know the answer but it looks like an issue with experimentalDecorators config. — Steven B.
Thanks for the ideas @StevenB. I have checked for experimental decorators in tsconfig and its enabled, same as "allowJs": true . I will be digging this more and I will let you know if I find the culprit. — zer0lis
@StevenB. I need to add babel plugin(loader) with vue add babel . Thanks for your help! — zer0lis

zer0lis zer0lis · Accepted Answer · 2020-07-10T12:05:20

0

votes

I needed to add babel plugin(loader) with vue add babel

Using class based components with lang=ts alongside lang=js

1 Answers