[material-ui][TextField] TypeScript not working

[ArthurNRL]

The problem in depth

We are migrating some components(Dialogs , forms, etc) to a package so we can share code between projects.
Typescript is basically not working for the TextField component (it's only component showing this behaviour)
I think there's something wrong with the config in this project since it works fine in other project using the same mui packages versions.
Here are some examples of whats happening:


Basically typescript is not able to evaluate the types of the props. This is blocking me since the ci/cd need the tsc to pass.

# tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "preserveSymlinks": true
  },
  "include": ["src", "index.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

# tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

# vite.config.ts
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import checker from "vite-plugin-checker";
import dts from "vite-plugin-dts";
import viteTsconfigPaths from "vite-tsconfig-paths";
import { peerDependencies } from "./package.json";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: "./index.ts", // Specifies the entry point for building the library.
      name: "wam-core-frontend", // Sets the name of the generated library.
      fileName: `index`,
      formats: ["es"],
    },
    rollupOptions: {
      external: [...Object.keys(peerDependencies)], // Defines external dependencies for Rollup bundling.
    },
    sourcemap: true, // Generates source maps for debugging.
    emptyOutDir: true, // Clears the output directory before building.
  },
  plugins: [
    react(),
    dts(),
    viteTsconfigPaths(),
    checker({
      typescript: true,
    }),
  ],
});

Any help is apreciated

Your environment

System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: 8.6.0 - ~/.local/share/pnpm/pnpm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: 11.11.3
@emotion/styled: 11.11.0
@mui/icons-material: 5.15.15
@mui/lab: 5.0.0-alpha.163
@mui/material: 5.15.15
@mui/system: 5.15.15
@mui/x-data-grid: 6.19.9
@mui/x-data-grid-pro: 6.19.9
@mui/x-date-pickers: 6.19.6
@mui/x-date-pickers-pro: 6.19.6
@mui/x-tree-view: 7.1.0
@types/react: ^18.2.0 => 18.2.0
react: 18.2.0
react-dom: 18.2.0
typescript: ^5.4.5 => 5.4.5

Search keywords: typescript textfield
Order ID: 48634

[ArthurNRL]

@mj12albert any ideas would be appreciated

[crmcluckie]

Can we have an update on the ticket, please?

[stefan-klaes]

You could provide the type like this:

onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  }}

Pasted it from the docs

[ArthurNRL]

Of course I could, the issue is that the rest of the props types are not being evaluated correctly. I can pass anything to any props. This does not ensure type safety