morozow
commented
1 month ago Nitpick: If anyone encounters this issue, here is a quick fix for Unix systems using Yarn post-install:
#!/bin/bash
cd ./
echo "Tuning of TypeScript types for React node_modules packages..."
# Find all .ts files in the project directory including node_modules and replace the import statement
find . -type f -name "*.ts" -exec sed -i '' 's/import PropTypes from '"'"'prop-types'"'"';/import * as PropTypes from '"'"'prop-types'"'"';/g' {} +
# Find all .ts files in the project directory including node_modules and replace the import statement
find . -type f -name "*.ts" -exec sed -i'' -e 's#import React[^;]*#import * as React from '"'"'react'"'"'#g' {} +Smth like this into package.json:
...
"scripts": {
"postinstall": "bash ./bin/post.install.sh",
}
...
oliviertassinari
Janpot
github-actions[bot]
Steps to reproduce
Link to live example: local dev as there's no TS completion to build live phase
Steps:
import PropTypes from 'prop-types';.Current behavior
When using Material UI with TypeScript, I encountered a compilation error due to the incorrect use of
import PropTypes from 'prop-types';in the codebase.Typescript Compiler error:
Current example of Material UI implementation: https://github.com/mui/material-ui/blob/bb620d85a89651ca4350e8861bbb35776d583726/packages/mui-utils/src/chainPropTypes/chainPropTypes.ts#L1
Since the
prop-typeslibrary does not have a default export, this import statement is incorrect and should instead use named imports to align with ES6 module standards. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/prop-types/index.d.tsSolution: apply
import * as PropTypes from 'prop-types';Expected behavior
The project should compile without errors.
Context
Replace all occurrences of
import PropTypes from 'prop-types';withimport * as PropTypes from 'prop-types';in the entire Material UI codebase.Additional Context
Your environment
``` System: OS: macOS 14.1.1 Binaries: Node: 20.9.0 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 128.0.6613.120 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.0.2 @mui/envinfo: ^2.0.25 => 2.0.25 @mui/icons-material: ^6.0.2 => 6.0.2 @mui/material: ^6.0.2 => 6.0.2 @mui/private-theming: 6.0.2 @mui/styled-engine: 6.0.2 @mui/styles: ^6.0.2 => 6.0.2 @mui/system: 6.0.2 @mui/types: 7.2.16 @mui/utils: 6.0.2 @mui/x-date-pickers: ^7.16.0 => 7.16.0 @mui/x-internals: 7.16.0 @types/react: ^18.3.5 => 18.3.5 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.6.2 => 5.6.2 ```npx @mui/envinfoSearch keywords: error, types, d.ts