Unable to load default and exported from vue templates

Expected Behaviour

I expect to import default and exported interfaces from ts file/portion. It was working on ts-loader 8.x with webpack 4.x and it’s failing on ts-loader 9.x with webpack 5.x.

It even works on ts-loader 8.x using webpack 5.x (not recommended since I believe it’s not designed for).

Actual Behaviour

Typescript return the error TS2614 when trying to do an import like import HelloWorld, { HelloProp } from './components/HelloWorld.vue';

See the full output:

(ts-loader-9)$ ./node_modules/.bin/webpack
assets by status 53.1 KiB [cached] 1 asset
orphan modules 416 KiB [orphan] 15 modules
runtime modules 500 bytes 2 modules
./src/main.ts + 14 modules 415 KiB [built] [code generated]

ERROR in /Users/juanbasso/tmp/webpack5/hello-world-no-class/src/App.vue.ts
3:21-30
[tsl] ERROR in /Users/juanbasso/tmp/webpack5/hello-world-no-class/src/App.vue.ts(3,22)
      TS2614: Module '"*.vue"' has no exported member 'HelloProp'. Did you mean to use 'import HelloProp from "*.vue"' instead?
ts-loader-default_0c5a263502dc9404

webpack 5.48.0 compiled with 1 error in 5039 ms

Steps to Reproduce the Problem

I created a sample to reproduce the working and not working versions:

• ✅ ts-loader 8.x with webpack 4.x: https://github.com/jrbasso/ts-loader-import-bug/tree/ts-loader-8
• ✅ ts-loader 8.x with webpack 5.x: https://github.com/jrbasso/ts-loader-import-bug/tree/ts-loader-8-webpack5
• ✖️ ts-loader 9.x with webpack 5.x: https://github.com/jrbasso/ts-loader-import-bug/tree/ts-loader-9

To reproduce, simply checkout the branch and run npm ci && ./node_modules/.bin/webpack

Location of a Minimal Repository that Demonstrates the Issue.

See steps to reproduce.

[johnnyreilly]

I’d quite like for this to be fixed in ts-loader - I think it’s an issue. But as I’m not a Vue user I’m not well placed to help.

My guess is that the answer lies in looking at the src files on this PR:

https://github.com/TypeStrong/ts-loader/pull/1251

That’s where we went from ts-loader 8 to 9 and where I assume the break happened. (Maybe worth checking that v9.0.0 was the first version where this didn’t work)

The src changes are actually pretty minimal, so I expect diagnosis might be fairly straightforward

[olsgreen]

I’ve just run into this while trying to import interfaces exported from Vue SFCs. I’m not using the shim for vue so the resulting error is a TS2307:

ERROR in /path/to/importing/component.vue.ts(LINE,CHAR)
TS2307: Cannot find module './path/to/exporting/component.vue' or its corresponding type declarations.

Downgrading from 9.2.6 to 8.3.0 also fixes the problem for me (maintaining running webpack 5). I can verify that 9.0.0 was the version that broke things. I’m going to take a look at the PR above and try and isolate what’s causing it.