PropTypes warnings not displaying in Next.js 14 App Router with React 18.3.1 and React Router DOM

[zestlee1106]

Bug Report

Description

When using Next.js 14 with the App Router, React 18.3.1, and React Router DOM for routing, PropTypes warnings are not displaying in the console, even in development mode. This issue occurs despite PropTypes being correctly defined and used within components.

Context and Setup

• React Version: 18.3.1
• Next.js Version: 14.x.x
• React Router DOM: (Specify the version you're using, e.g., 6.x.x)
• Environment: Development (NODE_ENV=development)

Due to internal constraints, we are using React Router DOM for routing within a single index.js page in our Next.js project. Despite this setup, we expect PropTypes warnings to appear in the developer console when required props are missing.

Steps to Reproduce

1. Create a new Next.js 14 project using npx create-next-app.

2. Install prop-types and react-router-dom using npm install prop-types react-router-dom.

3. Set up routing within a single page.js page using React Router DOM:

   'use client';
   
   import PropTypes from 'prop-types';
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   
   const MyTitle = ({ name }) => {
     return (
       <div className='title_wrap'>
         <h2>{name}</h2>
       </div>
     );
   };
   
   MyTitle.propTypes = {
     name: PropTypes.string.isRequired,
   };
   
   export default function Home() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<MyTitle />} />
         </Routes>
       </Router>
     );
   }

4. Run the project using npm run dev.

5. Observe that even when the name prop is missing, no PropTypes warning is displayed in the browser's developer console.

Expected Behavior

In development mode, when a required prop is missing, a PropTypes warning should be displayed in the console.

Actual Behavior

No PropTypes warnings are displayed, even when required props are missing.

Additional Context

• The project is using the Next.js App Router with React 18.3.1.
• Due to internal reasons, we are using React Router DOM within a single page in our Next.js project.
• The issue persists despite checking that NODE_ENV is set to development.

Please let me know if there is any additional information required or if there are any potential workarounds. Thank you!

[ljharb]

This seems like a create-next-app or next issue, since prop-types hasn’t changed in awhile, and react 19 is the one that drops propType warnings. I’m not sure how this library could cause that.

[zestlee1106]

@ljharb Thank you for your response. Since I’m using React 18, the prop-type warnings should still be functioning as expected, but unfortunately, they are not. As you suggested, this might indeed be a Next.js issue. I’ll proceed with creating an issue in the Next.js repository with this in mind. I appreciate your guidance!