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

[ghost]

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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[vladpereverzyev]

The import fails because the prop-types package isn't installed in this project — it's a standalone npm package, not something React or Vite ships. Vite's import-analysis tries to resolve import PropTypes from "prop-types" and can't find it in node_modules, hence "Failed to resolve import".

That also explains your two observations:

Commenting out MyComponent.propTypes = {…} makes the error disappear because that line is the only thing that actually uses PropTypes. Once it's gone, the now-unused import is dropped during transform, so Vite never has to resolve it.
Your plain-JSX version works because in that project prop-types happens to be installed (it's a common transitive dependency), so the import resolves there.

You have two options:

1. If you want to keep runtime prop-types, install the package:

 npm install prop-types

2. Recommended for a TypeScript project: you don't need prop-types at all. Your interface Props { name: string } already gives you the same checking at compile time, and propTypes is a runtime feature that's redundant once you have TS types. Just remove both the import and the .propTypes line:

tsx
   interface Props {
     name: string
   }

   export default function MyComponent(props: Props) {
     return <h1>hello {props.name}</h1>
   }

Option 2 is the idiomatic approach in a TypeScript + React codebase.