Typescript errors

Emptyless

I am trying to add Typescript support to my App however I am stuck getting the Webpack configuration to work. At the moment I have extended the quasar.conf.js extendWebpack method with:

cfg.resolve.extensions.push('.ts', '.tsx');
        cfg.module.rules.push({
          test: /\.ts(x?)$/,
          use: [
            {
              loader: 'babel-loader',
            },
            {
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: [/\.vue$/],
              },
            },
          ],
          include: [
            './src',
          ],
        });

Then I have for example a TaskList.tsx component (very basic example):

import { Component, Vue, Prop } from 'vue-property-decorator'
import { Task, TaskProperties } from './Task'
import { CreateElement, VNode } from 'vue';

/**
 * Class that collects Task data and renders
 * the loaded tasks using Task child component
 * 
 * @property {String} title: Title of the TaskList
 */
@Component({
    components: {
        Task
    }
})
class TaskList extends Vue {

    @Prop(String) title!: string

    private tasks: TaskProperties[] = [
        {
            title: 'Task A',
            value: true
        },
        {
            title: 'Task B',
            value: false
        }
    ]

    /**
     * Default Vue Render method.
     * @param {CreateElement} h: JSX Render Factory
     */
    public render (h: CreateElement): VNode {
        const tasks : VNode[] = this.tasks.map((task) => {
            return (
                <Task {...task} />
            )
        })

        return (
            <div>
                <h5>{this.title}</h5><br />
                { tasks }
            </div>
        )
    }

}

export { TaskList }

Which I want to import in App.vue:

<template>
  <div id="q-app">
    <task-list title="Test"/>
  </div>
</template>

<script>
import { TaskList } from './models/tasks/TaskList';

export default {
  name: 'App',
  components: {
    TaskList,
  },
};
</script>

<style>
</style>

But when I run quasar dev I get the error:

Module parse failed: Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  * @property {String} title: Title of the TaskList
|  */
> @Component({
|     components: {
|         Task

 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts& 8:0-51 13:4-12
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

It is still using the vue-loader instead of the ts-loader. I have tried lots of loader configs, tsconfigs and tutorials but for some reason I can’t get this to work. Does anyone know why the .tsx file is not handled by ts-loader?

Emptyless

I found the problem! For future reference, the problem was in the include part of the quasar.conf.js file where the ./src/ part was probably referencing relative to the node modules directory. Adding:

const path = require('path')
const srcDir = path.join(__dirname, 'src')

and using srcDir instead of ‘./src’ resolved the error!

webfacer

hi it is old, but i am getting still this error. how did you solve this and where did you set the config, in which line?

No More Posting New Topics!

Typescript errors