Add React 19 as peer-dependency

[ruiaraujo012]

Now that react 19 is stable, you should add it as a peer dep.

├─┬ mui-one-time-password-input 3.0.1
│ ├── ✕ unmet peer @types/react@^18.0.0: found 19.0.1
│ ├── ✕ unmet peer react@^18.0.0: found 19.0.0
│ └── ✕ unmet peer react-dom@^18.0.0: found 19.0.0

Thanks.

[kjartanvalur]

I´m getting error when building with React 19

src/@auth/services/jwt/components/Jwt2faForm.tsx:249:9 - error TS2786: 'MuiOtpInput' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type '(props: any) => ReactNode'.
      Type 'import("C:/xxx/node_modules/mui-one-time-password-input/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

249        <MuiOtpInput
            ~~~~~~~~~~~

[ruiaraujo012]

I´m getting error when building with React 19

src/@auth/services/jwt/components/Jwt2faForm.tsx:249:9 - error TS2786: 'MuiOtpInput' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type '(props: any) => ReactNode'.
      Type 'import("C:/xxx/node_modules/mui-one-time-password-input/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

249        <MuiOtpInput
            ~~~~~~~~~~~

I'm using it with react 19 now and it's working well, just the warning on install. Probably you're doing something wrong. I had a similar issue and the problem was the declaration in my global.d.ts file. I was missing an import there. Can you show your global.d.ts file if you have one, or the declare module ...?

[kjartanvalur]

This works fine in development (localhost) but this error comes when I run npm run build
I import the module like this in the component:

import { MuiOtpInput } from 'mui-one-time-password-input';

Here is the part when I use this in my component:

<Controller
					name="code"
					control={control}
					render={({ field }) => (
						<div>
							<MuiOtpInput
								{...field}
								length={6}
								autoFocus
								validateChar={validateChar}
								onChange={handleChange}
							/>
							{errors.code && (
								<Typography
									color="error"
									variant="caption"
									className="mt-2 ml-4"
								>
									{errors.code.message}
								</Typography>
							)}
						</div>
					)}
				/>

Here is the global.d.ts file:

/**
 * The module for importing CSS files.
 */
declare module '*.css' {
	const content: Record<string, string>;
	export default content;
}

/**
 * The type definition for the Node.js process object with additional properties.
 */
type ProcessType = NodeJS.Process & {
	browser: boolean;
	env: Record<string, string | undefined>;
};

/**
 * The global process object.
 */
declare let process: ProcessType;

/**
 * The type definition for the Hot Module object.
 */
interface HotModule {
	hot?: {
		status: () => string;
	};
}

declare const module: HotModule;
declare module '*?raw' {
	const content: string;
	export default content;
}

[ruiaraujo012]

Um, a bit strange, I don't see anything wrong there. Can you share a minimal reproduction of that error?

[viclafouch]

I don't recommend to update your MUI project to React 19 before mui/material-ui#42381 is completed.

I will wait until is done and then, I will add the compatibility.

[ruiaraujo012]

I think they are discussing v5 of MUI in that issue, if so, since you are using MUI v6, it should be compatible already.

[kjartanvalur]

Um, a bit strange, I don't see anything wrong there. Can you share a minimal reproduction of that error?
@ruiaraujo012
I´m trying to make a sandbox in React 19 but I don´t know what I´m doing wrong.

https://codesandbox.io/p/sandbox/mui-one-time-password-input-forked-zsw9f3

[ruiaraujo012]

Um, a bit strange, I don't see anything wrong there. Can you share a minimal reproduction of that error?
@ruiaraujo012
I´m trying to make a sandbox in React 19 but I don´t know what I´m doing wrong.

https://codesandbox.io/p/sandbox/mui-one-time-password-input-forked-zsw9f3

Me neither, could be something related to react-scripts I'm using vite. I tried using a fork of a MUI documentation example, and as soon as I add mui-one-time-password-input I got an error.

[kjartanvalur]

Ok this is somehow related to React 19 and mui-one-time-password-input. I can get this sandbox to work with React 18.

[ruiaraujo012]

IDK how, but in my codebase, I was able to migrate from React 18 to 19 and everything is working, including the otp-input and the tel-input. But I'm using pnpm and vite instead of npm and react-scripts

[kjartanvalur]

I´m also using vite in my codebase and this works in development but I get the above error when building the app.

I´m just trying to replicate this in a sandbox but noticed I could not update the demo that is used in the mui-otp-input documentation.
https://codesandbox.io/p/sandbox/mui-one-time-password-input-pukd5t

[ruiaraujo012]

Does it work if you set legacy-peer-deps=true when doing the npm i or inside the .npmrc file?

[kjartanvalur]

Does it work if you set legacy-peer-deps=true when doing the npm i or inside the .npmrc file?

Does not seem to make a difference in my case

[ruiaraujo012]

I don't know what could be then, I'm out of ideas.

[kjartanvalur]

@ruiaraujo012
Thanks anyway!

[kjartanvalur]

@viclafouch
Any thoughts?

[viclafouch]

I will try this weekend ! Keep you posted here !