How to get TypeScript errors to match original line number in Vue + TS + Webpack project

Viewed 284

So I've set up a Vue project with Webpack, then I installed the proper loaders and moved to TypeScript inside my SFCs. It's all running good, except that the TS errors caught during build time are shown accordingly to compiled files, thus making debugging difficult.

My Webpack config looks like this:

// ...
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.png$/,
        use: 'file-loader'
      }
    ]
  }
}

So, the .vue files are converted by the ts-loader during build time, and I end up getting errors like this in my Webpack output:

ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts
52:29-59
[tsl] ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts(52,30)
      TS2571: Object is of type 'unknown'.
ts-loader-default_0c5a263502dc9404

ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts
57:27-39
[tsl] ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts(57,28)
      TS2571: Object is of type 'unknown'.
ts-loader-default_0c5a263502dc9404

ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts
66:27-39
[tsl] ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts(66,28)
      TS2571: Object is of type 'unknown'.
ts-loader-default_0c5a263502dc9404

ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts
74:42-54
[tsl] ERROR in /home/mega/savitri/packages/frontend/src/components/molecules/CSearch/CSearch.vue.ts(74,43)
      TS2571: Object is of type 'unknown'.
ts-loader-default_0c5a263502dc9404

Searching around I've came across several answers regarding source maps, but as far as I'm aware this serves devtools debugging only. How can I get the errors to match original files in order to solve them?

0 Answers
Related