Typescript errors

  • 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');
              test: /\.ts(x?)$/,
              use: [
                  loader: 'babel-loader',
                  loader: 'ts-loader',
                  options: {
                    appendTsSuffixTo: [/\.vue$/],
              include: [

    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
        components: {
    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 (
                    <h5>{this.title}</h5><br />
                    { tasks }
    export { TaskList }

    Which I want to import in App.vue:

      <div id="q-app">
        <task-list title="Test"/>
    import { TaskList } from './models/tasks/TaskList';
    export default {
      name: 'App',
      components: {

    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? (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?

  • 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!

  • 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?

Log in to reply