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');
            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?



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