'Signup' refers to a value, but is being used as a type here. Did you mean 'typeof Signup'?ts(2749)

[WILSON2624]

Summary

I have a nextjs 14 project configured with Typescript. Most of the JSX returned in react components are giving this error when I hover over it. 'Signup' refers to a value, but is being used as a type here. Did you mean 'typeof Signup'?ts(2749). Signup in this case is a custom component. The code run properly without Issues. I am using visual studio code editor. I have seen people advising to use .tsx instead of .ts. I have done that but it is not solving the problem. It denies me the benefits of intellisence.

I have pasted my Signup component code under Additional information

Additional information

"use client";

import Link from "next/link";
import { useFormik } from "formik";
import * as yup from "yup";
import { hash } from "bcrypt";

import useVisibility from "./useVisibility";

import Box from "@component/Box";
import Icon from "@component/icon/Icon";
import Divider from "@component/Divider";
import FlexBox from "@component/FlexBox";
import CheckBox from "@component/CheckBox";
import TextField from "@component/text-field";
import { Button, IconButton } from "@component/buttons";
import { H3, H5, H6, SemiSpan, Small, Span } from "@component/Typography";
// STYLED COMPONENT
import { StyledRoot } from "./styles";
import { useEffect } from "react";
import { axiosInstance } from "@lib/core-api";

type FormType = {
  name: string;
  email: string;
  phone: string;
  password: string;
};

export default function Signup() {
  const { passwordVisibility, togglePasswordVisibility } = useVisibility();

  const initialValues: FormType = {
    name: "Wasswa Wilson",
    email: "[email protected]",
    phone: "+256783230321",
    password: "2624",
  };

  const formSchema = yup.object().shape({
    name: yup.string().required("Name is required"),
    email: yup.string().email("Invalid email").required("$Email is required"),
    phone: yup.string().required("Phone is required"),
    password: yup.string().required("Password is required"),
  });

  const handleFormSubmit = async (values: FormType) => {
    const response = await axiosInstance.post("/users", values);
    const results = response.data;
    console.log(values);
    console.log(results);
  };

  const { values, errors, touched, handleBlur, handleChange, handleSubmit } =
    useFormik({
      initialValues,
      onSubmit: handleFormSubmit,
      validationSchema: formSchema,
    });

  return (
    <StyledRoot mx="auto" my="2rem" boxShadow="large" borderRadius={8}>
      <form className="content" onSubmit={handleSubmit}>
        <H3 textAlign="center" mb="0.5rem">
          SIGNUP FORM
        </H3>

        <TextField
          fullwidth
          mb="0.75rem"
          name="name"
          type="text"
          onBlur={handleBlur}
          value={values.name}
          onChange={handleChange}
          placeholder="Full name"
          label="Name"
          errorText={touched.name && errors.name}
        />

        <TextField
          fullwidth
          mb="0.75rem"
          name="email"
          type="email"
          onBlur={handleBlur}
          value={values.email}
          onChange={handleChange}
          placeholder="[email protected]"
          label="Email"
          errorText={touched.email && errors.email}
        />

        <TextField
          fullwidth
          mb="0.75rem"
          name="phone"
          type="phone"
          onBlur={handleBlur}
          value={values.phone}
          onChange={handleChange}
          placeholder="Phone (e.g: +256 783230321)"
          label="Phone Number"
          errorText={touched.phone && errors.phone}
        />

        <TextField
          mb="1rem"
          fullwidth
          name="password"
          label="Password"
          autoComplete="on"
          onBlur={handleBlur}
          onChange={handleChange}
          placeholder="*********"
          value={values.password}
          errorText={touched.password && errors.password}
          type={passwordVisibility ? "text" : "password"}
          endAdornment={
            <IconButton
              p="0.25rem"
              mr="0.25rem"
              type="button"
              onClick={togglePasswordVisibility}
              color={passwordVisibility ? "gray.700" : "gray.600"}
            >
              <Icon variant="small" defaultcolor="currentColor">
                {passwordVisibility ? "eye-alt" : "eye"}
              </Icon>
            </IconButton>
          }
        />

        <Button
          mb="1.65rem"
          variant="contained"
          color="primary"
          type="submit"
          fullwidth
        >
          Signup
        </Button>

        <FlexBox justifyContent="center" mb="1.25rem">
          <SemiSpan>Already have an account?</SemiSpan>
          <Link href="/login">
            <H6 ml="0.5rem" borderBottom="1px solid" borderColor="gray.900">
              Login
            </H6>
          </Link>
        </FlexBox>
      </form>
    </StyledRoot>
  );
}

Example

No response

[icyJoseph]

Hi,

To work with JSX, you must use .tsx. Otherwise, you collide with the as syntax feature in .ts files:

• https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator

I'd say, reopen your editor, or ctrl + shift + p and type reload window, that should restart the TypeScript language server, and get rid of the error.

Otherwise, delete .next as well.

Also make sure that VSCode is using your project's TypeScript version, and not its own.

[WILSON2624]

I reloaded the window, Reinstalled typescript globally and also deleted .next folder.
However, some files are still showing the same problem.

[icyJoseph]

Can you share your tsconfig file?

[WILSON2624]

{
"compilerOptions": {
"baseUrl": "src",
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@lib/": [
"lib/"
],
"@data/": [
"data/"
],
"@hook/": [
"hooks/"
],
"@utils/": [
"utils/"
],
"@context/": [
"contexts/"
],
"@reducer/": [
"reducers/"
],
"@component/": [
"components/"
],
"@sections/": [
"page-sections/"
],
"@models/": [
"models/"
]
}
},
"include": [
"next-env.d.ts",
"/*.ts",
"/.tsx",
".next/types/**/.ts"
],
"exclude": [
"node_modules",
"./src/components/icon/Icon.tsx"
]
}

[WILSON2624]

tsconfig.json

[rakhi2207]

Any resolution facing same issue tried all the things mentioned by @WILSON2624

[nhhockeyplayer]

this has been intermittently plaguing builds for other frameworks
I am building esm libraries
As a safeguard I also need to make my libraries accomodate the transient commonjs landmines that projects encounter
like interfacing with type libraries such as mongoose or others that are commonjs or not esm compliant
so when my code kisses (codes against using a type) a commonjs package/module, I need to make sure anything I develop is bidirectionally compatible by providing library interfaces for esm and commonjs for importing

I can flush this error out in my code by directly using a mongoose type like Document
if I hide that with a POJO and use the pojo from my library (which is esm/commonjs compatible) this error goes away

so this appears to be a glitch in the compiler
a weak error
and the description is outrageous trying to enforce the developer to place typeof in front of perfectly legit typescript
and that suggestion made by the tsc compiler should be changed its outrageous and will ruin a large codebase eventually forcing the developer to roll everything back

or code with a major limp

anyone receiving this error should probably research esm/commonjs compatibility
they are obviously combining types, modules and npm packags in a manner thats not properly shielded and interfaced

typescript needs to navigate import statements and types (it uses a search algorithm) during compilation.

In my case
import { SpinnerPojoModel } from '@nhhockeyplayer/shared-util-isomorphic';
is actually a mongoose Document available in my shared-util-isomorphic lib for convenience whenever I need that (rarely)
to fix my error I switched my import to
import { SpinnerPojo } from '@nhhockeyplayer/shared-util-isomorphic';
which is not a mongoose Document but just a signature based model object

my shared-util-isomorphic library emits esm/commonjs interfaces in its package.json when installed to accomodate esm/commonjs

hope this helps

[nhhockeyplayer]

sorry if my answer deviates to more of the back end I am fullstack

your code looks more all front end UI

what I would then research are circular dependencies that do cause the compiler to cave

circular dependencies lurk everywhere in the field and few know about this
very time consuming unless you have best tools methods and practices on the table

import statements are the center piece

I use a dependency graph to visualize what depends on what, rooting out self referencing imports within libraries, crazy constructed relative imports that span folders and should not, the list goes on