[bug] File could not be loaded with resolve.extensions: ['.vue', '.ts']

[CarterLi]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

Exception error: File could not be loaded is thrown when using resolve.extensions: ['.vue', '.ts'] with import MyComponent from './my-component' // without .vue extension

yarn run v1.22.10
warning package.json: No license field
$ vite
 > html:/Users/Carter/vite-bug/src/App.vue: error: File could not be loaded: src/v-text.vue
    2 │ import VText from './v-text';
      ╵                   ~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
html:/Users/Carter/vite-bug/src/App.vue:2:18: error: File could not be loaded: src/v-text.vue
    at failureErrorWithLog (/Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:1170:15)
    at buildResponseToResult (/Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:906:32)
    at /Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:1001:20
    at /Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:553:9
    at handleIncomingPacket (/Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:642:9)
    at Socket.readFromStdout (/Users/Carter/vite-bug/node_modules/esbuild/lib/main.js:520:7)
    at Socket.emit (node:events:378:20)
    at addChunk (node:internal/streams/readable:313:12)
    at readableAddChunk (node:internal/streams/readable:288:9)
    at Socket.Readable.push (node:internal/streams/readable:227:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I saw the note about custom import types. It was NOT recommended instead of NOT allowed so I believed that using resolve.extensions: ['.vue'] should work by design.

Reproduction

https://github.com/CarterLi/vite-bug

yarn && yarn dev

System Info

• vite version: 2.0.1
• Operating System: macOS 11.2
• Node version: v15.9.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.10

Logs (Optional if provided reproduction)

N/A

[jonaskuske]

No matter whether this should work or not, just FYI: support for omitting .vue is removed from Vue CLI, too so I really don't think it's a good idea

[CarterLi]

No matter whether this should work or not, just FYI: support for omitting .vue was removed from Vue CLI, too so I really don't think it's a good idea

It's supported with the similar way

// vue.config.js
config.resolve.extensions
  .clear()
  .merge(['.vue', '.tsx', '.ts', '.mjs', '.js', '.jsx', '.json', '.wasm']);

The document says it IS supported so it SHOULD work. It is NOT a feature request but a bug.

[CarterLi]

This is why I want to omitting .vue.

The type system of .vue file is always a mess. Since it's globally defined as

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

You can never access data / methods of a component in a properly way.

<!-- my-component.vue -->
<template>...</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  methods: {
    test(param: string) {},
  },
})
</script>

import MyComponent from './my-component.vue';

export default {
  components: { MyComponent },
  methods: {
    test() {
      (this.$refs.myComponent as typeof MyComponent).test(''); // No type checking, no IDE intelligence
    }
  }
}

That makes TypeScript less powerful. vue-class-component won't help too.

But omitting .vue does the trick.

<template>...</template>
<script lang="ts" src="./my-component.ts" />

// my-component.ts
import { Vue, Options } from 'vue-class-component'

@Options()
export default class MyComponent extends Vue {
  test(param: string) {}
}

import MyComponent from './my-component'; // imports the value of `my-component.vue`, with the type of `my-compnoent.ts`

export default {
  components: { MyComponent },
  methods: {
    test() {
      (this.$refs.myComponent as MyComponent).test(''); // type checking, and IDE intelligence
    }
  }
}

[yyx990803]

This should work technically, but again, DON'T USE IT. All future Vue APIs / ecosystem tooling will all assume explicit extensions for .vue imports. You are just creating incompatibility and writing less explicit code for no good reason.

[CarterLi]

This should work technically, but again, DON'T USE IT. All future Vue APIs / ecosystem tooling will all assume explicit extensions for .vue imports. You are just creating incompatibility and writing less explicit code for no good reason.

Better TypeScript support is a good reason IMO. I know it's a hack, but before .vue files are correctly typed, I will keep using this hack.

[yyx990803]

@CarterLi both @vuedx/typescript-plugin-vue and Volar's built-in TS plugin support already can provide types for .vue imports.

[zhaozhuoboy]

This should work technically, but again, DON'T USE IT. All future Vue APIs / ecosystem tooling will all assume explicit extensions for .vue imports. You are just creating incompatibility and writing less explicit code for no good reason.

How do I retrofit an existing project to use Vite, since I developed my own business component library and released the NPM package with the omission of the Vue extension

[patak-dev]

@zhaozhuoboy comments in old issues are probably going to be ignored. Please start a GitHub Discussion or join the chat at Vite Land to ask questions.

[fgr-araujo]

Any tip to help someone who is refactoring to vue3 with vite?