Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unknown HTML elements or components are allowed in templates #2291

Closed
jmroon opened this issue Jan 7, 2023 · 4 comments
Closed

Unknown HTML elements or components are allowed in templates #2291

jmroon opened this issue Jan 7, 2023 · 4 comments
Labels
bug Something isn't working

Comments

@jmroon
Copy link

jmroon commented Jan 7, 2023

Using the "strictTemplates" option, I would have expected that unknown components in my templates might throw an error, but this does not appear to be the case.

Is there perhaps an other option I'm missing, or is this expected behavior? It becomes difficult for developers to know when to import components when there is no indication (other than hovering and seeing if the type is resolved) whether the component is imported or not.

image

@hworld
Copy link

hworld commented Jan 9, 2023

I am also running into this. Was about to make an issue, it seems like it's been this way for months and it makes it really hard to know where you might have missing imports. Is there another option required for TS to maybe trigger this as an error?

Here's my tsconfig:

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"moduleResolution": "node",
		"isolatedModules": true,
		"strict": true,
		"experimentalDecorators": true,
		"strictFunctionTypes": false,
		"noUnusedParameters": true,
		"noUnusedLocals": true,
		"allowJs": true,
		"sourceMap": true,
		"importHelpers": true,
		"downlevelIteration": true,
		"resolveJsonModule": true,
		"useDefineForClassFields": false,
		"esModuleInterop": false,
		"jsx": "preserve",
		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
	},
	"exclude": ["build", "node_modules", ".cache"],
	"vueCompilerOptions": {
		"strictTemplates": true
	}
}

I'm using takeover mode with the latest extension.

@jmroon
Copy link
Author

jmroon commented Jan 16, 2023

It's indeed strange. Pretty big gap in the type safety of the templates right now. It makes it particularly annoying to import components if you're not using unplugin-vue-components. Using unplugin-vue-components has its own share of problems as it also messes with typescript on the components as well.

For now, I'm resorting to just using Webstorm without unplugin-vue-components for the best Vue 3 experience at the moment.

@SkippedTurn
Copy link

SkippedTurn commented Jan 27, 2023

This used to be a feature in Volar before version 0.34.17, where unknown tags would be displayed in red. I believe this feature was abandoned though because there was an issue where for some users it would display all component tags as invalid. (See #1247) Don't think there's been a replacement for it since.

That being said, I would love for this feature (or a functional equivalent) to make a return. Can we turn this issue into a feature request?

@hworld
Copy link

hworld commented Feb 18, 2023

Returning here since I just pushed a bug out to production (again) because of a missing import. We even have someone on the team using a super old Volar version that refuses to upgrade just since the "missing imports" feature would go away.

Is there anything we can do to get the feature back at least as an opt-in option?

Do we have to make this issue an explicit feature request? I'm not sure what the exact process is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants