Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Functional Component has type 'any'

See original GitHub issue

Environment

nuxi info

Operating System: Linux
Node Version: v18.8.0
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.1
Package Manager: npm@8.18.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

VSCode + Volar + TakeOver mode 4.8.2

Reproduction

https://github.com/f3oall/nuxt3-functional-component

Describe the bug

Autoimported Functional Components have type ‘any’.

You can see that I explicitly typed component in reproduction. If it’s not a bug and I’m doing something wrong, explanation is welcome.

Screenshot:

image (2)

Additional context

No response

Logs

No response

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

xiaoxiangmoecommented, Sep 20, 2022

@danielroe See

If we change 'Functional': typeof import("../components/Functional.ts")['default'] to 'Functional': typeof import("../components/Functional")['default']

This will works well.

So this is also a bug in nuxt. This will only work if TypeScript support import with .ts file extension name in the future.

0reactions

f3oallcommented, Sep 19, 2022

Sure, will do that. Thanks!

Top Results From Across the Web

Function Components - React TypeScript Cheatsheets

Easiest way to declare a Function Component; return type is inferred. ... the return type so an error is raised if you accidentally...

TypeScript with React Functional Components

TypeScript has become a very popular enhancement for JavaScript applications. TypeScript is a superset of JavaScript that forces static ...

TypeScript and React: Components - fettblog.eu

Functional components are my most favourite thing in React. They are simple, purely functional and super easy to reason about. The following shows...

How to Develop React Functional Components with TypeScript

4 ways to define React functional components with TypeScript: Using React.FC, JSX.Element, React.PropsWithChildren, & defining the full type directly.

React 18 TypeScript children FC - Stack Overflow

Type '{ children: ...; }' has no properties in common with type ... Create your custom functional component type (a modification of FC...