TS support fails with incorrect browser import

[akaufmann]

For example, when you import a TS file into App.vue and access an exported member...

// App.vue
<script lang="ts">
import { count } from "./foo"

export default {
  data: () => ({ count })
}
</script>

... you get an Failed to load module script error:

vite/esbuild creates a foo resource without the .js/.ts extension. The JS file is also not accessible if you call it directly like http://localhost:3000/<path/to/foo.js>?t=<hash>.

[bekalshenoy]

give full file name import { count } from "./foo.js"

[akaufmann]

No, this does not work because a .js was not created.
GET http://localhost:3000/<path/to/foo.js> net::ERR_ABORTED 404 (Not Found) App.vue:1
But you can access the TS file directly in the browser http://localhost:3000/<path/to/foo.ts> (a source mapping URL was added).

[akaufmann]

This works import { count } from "./foo.ts" but Vetur is not happy with it

An import path cannot end with a '.ts' extension. Consider importing './foo' instead.Vetur(2691)

[yyx990803]

It works for me. Are you on windows? A reproduction with your system information would help when reporting issues.

[akaufmann]

Ah yeah, sorry! Here are the system/project informations:

macOS Catalina 10.15.4 (19E287)
node v13.7.0
yarn 1.22.0

Project deps:
"vue": "^3.0.0-beta.9"
"vite": "^0.11.1"
"@vue/compiler-sfc": "^3.0.0-beta.9"

I took a closer look at this. The problem occurs to me when App.vue is located in a folder (e.g. /src).
https://github.com/akaufmann/vite-bug-61

[macarie]

@akaufmann if I understand your problem correctly, this should be the correct behaviour, you are trying to import a file that doesn't exist.

In Node, it would throw an error as well (Error [ERR_MODULE_NOT_FOUND]: Cannot find module '{path}/foo' [...]), even if the file was a .js one.

import tries to resolve the exact path one's giving it as a URL, no post-processing is done, while require used to do some magic behind the scenes, like adding the extension for you.

I see that if I change the file's extension from .ts to .js it works, but I think that that is the real issue: it shouldn't work!

What would happen if I'd use something that doesn't need a transpiler or a bundler, like Preact + HTM, as I've seen from @yyx990803's tweets that's possible, and I use Vite just as a development server? Well... the code that works on the development server wouldn't work in my production environment (if you can call it that) because the extensions are missing from the import statements.