[Vuejs]-Vue SFC import TypeScript file throws "An import path cannot end with a '.ts' extension." in VS Code

by

1👍

Your Typescript imports typically should not end in extensions. Instead, Webpack should be configured to append the extensions as needed.

As in the Microsoft Typescript Vue SFC example on GitHub, your “resolve.extensions” list should include .ts:

  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

As in the resolve.extensions documentation:

Attempt to resolve these extensions in order.

If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.

👤Jeff Bowman

Leave a comment