TypeStrong / TypeStrong/ts-loader
Unable to load default and exported from vue templates
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.5k
- Forks
- 439
- Avg merge
- 17h 17m
- Merged PRs (30d)
- 2
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal repository branches and run npm ci && ./node_modules/.bin/webpack for the ts-loader 8.x and 9.x cases. Compare how src/App.vue.ts imports the default and named HelloProp exports from ./components/HelloWorld.vue; done means the ts-loader 9.x and webpack 5.x case compiles without TS2614.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100