Cannot use as JSX component (Reopen #47)

[thecodeinfluencer]

This is a reopen of #47 since it was closed with no solution

Below is issue description from christopher-becker (the original author of #47 )

Hi,

I've used this module on other projects and it works like a charm, but I recently installed the latest version 2 to a new project and I get the following error:

'MuiOtpInput' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.ts(2786) (alias) const MuiOtpInput: React_2.ForwardRefExoticComponent<Omit<MuiOtpInputProps, "ref"> & React_2.RefAttributes<unknown>> import MuiOtpInput

Even when I use demo code of:

import React from "react";
import { MuiOtpInput } from "mui-one-time-password-input";

const MyComponent = () => {
  const [otp, setOtp] = React.useState("");

  const handleChange = (newValue: string) => {
    setOtp(newValue);
  };

  return (
    <MuiOtpInput value={otp} onChange={handleChange} />
  );
};

I get the same error.

Any help would be appreciated.

Thanks.

viclafouch please keep this open for now in case any other person shares the same concern

[hannahlaek-wt]

Same thing happening to me. I'm using "react": "18.2.0",
and "next": "^14.2.3". No code snippet except importing the package into the file I need with import { MuiOtpInput } from "mui-one-time-password-input";

[viclafouch]

Hello !

Did you try this in your next config file ?

const nextConfig = {
  transpilePackages: ['mui-one-time-password-input'],
}

[thecodeinfluencer]

@viclafouch you're quick to close this issue but the transpilePackages doesn't work either (I actually had it when raising this issue)

Smilar to @hannahlaek-wt this issue is affecting all other JSX elements

'Card' cannot be used as a JSX component.
  Its type 'OverridableComponent<CardTypeMap<{}, "div">>' is not a valid JSX element type.
    Type 'OverridableComponent<CardTypeMap<{}, "div">>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Element | null' is not assignable to type 'ReactNode'.ts(2786)

next.config.ts

/** @type {import('next').NextConfig} */

const nextConfig = {
  output: "standalone",
  poweredByHeader: false,
  typescript: { ignoreBuildErrors: true },
  transpilePackages: ["mui-one-time-password-input"],
};

module.exports = nextConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./*"] }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "test-helpers/jsdom-extended.js"
  ],
  "exclude": ["node_modules"]
}

• Versions
  "typescript": "5.0.4"
"next": "^14.1.3",
"react": "18.2.0",

[thecodeinfluencer]

@viclafouch kindly keep it open a bit longer

[viclafouch]

I need a repro guys.. How can I debug without a codesandbox ? 😭