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

Question

I am trying to change my .vue components to work with TypeScript instead of JavaScript. For this reason my single file components look like this:

<template>
  ...something...
</template>

<script lang="ts">
import {  } from "./main.ts";

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

My editor tells me that I cannot import files with extensions, so "./main.ts" appears to be an error even if I can succesfully build it running webpack.

If I remove the .ts extension, my editor works fine (it also detects the module exports) but webpack fails to build the dist file throwing this error: Module not found: Error: Can't resolve './main' in ....

My webpack config file looks like this:

const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    plugins: [ new VueLoaderPlugin() ],
    module: {
            rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.vue']
    }
}

What is wrong with my configuration? Is it a problem of my editor or is it about the webpack configuration? How can I manage to let it work correctly? Thanks

Edit: After Jeff's answer (thanks Jeff), I changed the extensions and alias properties of my webpack configuration:

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

but this did not change the result.

Here is a link to the source code.

Jeff Bowman · Accepted Answer · 2019-10-07 18:12:01Z

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.

answered Oct 7, 2019 at 18:12

Jeff Bowman

96.2k19 gold badges227 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related