Skip to content

vite + react + typescript => getting an "failed to resolve import prop-types from path-here. Does this file exist error" #16574

Description

Describe the bug

some info:

  • I'm new to typescript/react but I'm familiar with Javascript.
  • I'm just developing locally for now
  • I'm using npm run dev to start the local webserver
  • this is the full error

` [plugin:vite:import-analysis] Failed to resolve import "prop-types" from "src/components/MyComponent.tsx". Does the file exist?

    D:/projects/multipath-react-typescript/src/components/MyComponent.tsx:1:34
    15 |    window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
    16 |  }
    17 |  import PropTypes from "prop-types";
       |                         ^
    18 |  export default function MultiPathComponent(props) {
    19 |    return /* @__PURE__ */ jsxDEV(Fragment, { children: /* @__PURE__ */ jsxDEV("h1", { children: [`
  • these are the contents of MyComponent.tsx

` import PropTypes from 'prop-types'

    interface Props { name: string }

    export default function MyComponent(props: Props) {

        return (

            <>

                <h1>hello {props.name}</h1>

            </>

        )

    }        

    MyComponent.propTypes = { name: PropTypes.string.isRequired }`
  • the error disappears if I comment out the last line but I believe propTypes and Typescript serve different uses (at least from what I read in another SO discussion)
  • I have a plain JSX version of the code and I don't encounter any errors there when using "prop-types"
  • I compared vite.config.js for both TSX and JSX version of the code and they are the same.

Reproduction

https://github.com/mrjayviper/my-sample-react

Steps to reproduce

  • npm install
  • npm run dev

System Info

the sample command above causes an error on my laptopn

- windows11
- nodejs 20.12.2
- npm 10.5.0

Used Package Manager

npm

Logs

No response

Validations

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions