RC-dock 库的 'DockLayout' 不能用作 JSX 组件。 它的实例类型“DockLayout”不是有效的 JSX 元素

Question

I see plenty of similar questions but none of the answers solve the problem in my code. I use React 17, Mui v5, TS v4. I try to implement a simple component from https://www.npmjs.com/package/rc-dock . I just literally copied and pasted a code from a sample available on codesandbox ( Dock.js ): https://codesandbox.io/s/yo2cx?file=/src/Dock.js:0-860 to a file in my app named SceneComponent.tsx . My VSCode constantly highlights the Docklayout element and returns two errors:

JSX element class does not support attributes because it does not have a 'props' property.ts(2607) 'DockLayout' cannot be used as a JSX component. Its instance type 'DockLayout' is not a valid JSX element. Type 'DockLayout' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786)

DockLayout is imported from a package and not created by myself, so I don't understand where this is coming from this error.

package.json

 { "name": "APP", "version": "1.0", "description": "App", "main": "src/index.tsx", "scripts": { "release": "webpack --config webpack.prod.config.js", "debug": "webpack --config webpack.dev.config.js", "test": "jest --verbose --coverage --runInBand", "testinspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose", "start": "webpack-dev-server --open --hot --https --config webpack.dev.config.js --port 3002", "pro": "webpack-dev-server --open --hot --config webpack.dev.config.js --port 3002", "prorelease": "webpack-dev-server --open --hot --config webpack.prod.config.js --port 3002", "jonsportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base ./", "andersportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base c:/src/seismicportal", "analyze": "webpack --config webpack.analyze.config.js", "lint": "eslint" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.6.2", "@mui/lab": "*", "@mui/material": "^5.6.2", "@mui/styles": "^5.9.0", "@reactivex/rxjs": "github:reactivex/rxjs", "@types/arcgis-js-api": "^4.20.1", "@types/classnames": "^2.3.0", "@types/jest": "^27.4.0", "@types/lodash": "^4.14.173", "@types/material-ui": "^0.21.9", "@types/qs": "6.9.7", "@types/react": "^17.0.47", "@types/react-color": "^3.0.5", "@types/react-dom": "^17.0.16", "@types/uuid": "^8.3.1", "assert": "^2.0.0", "axios": "^0.21.4", "buffer": "^6.0.3", "classnames": "^2.3.1", "d3": "^4.13.0", "esri-loader": "^3.2.0", "fast-png": "^6.1.0", "fork-ts-checker-webpack-plugin": "6.3.3", "geotiff": "^0.4.1", "https-browserify": "^1.0.0", "isomorphic-fetch": "^3.0.0", "jest": "^27.4.7", "jest-cli": "^27.4.7", "jpeg-js": "^0.4.3", "lerc": "^3.0.0", "npm-check-updates": "^11.8.5", "process": "^0.11.10", "prop-types": "^15.7.2", "qs": "^6.10.1", "rc-dock": "^3.2.10", "react": "^17.0.2", "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-rnd": "^10.3.5", "react-virtualized-auto-sizer": "^1.0.6", "react-virtuoso": "^2.13.1", "react-window": "^1.8.7", "rxjs": "^7.3.0", "stream": "^0.0.2", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "terser-webpack-plugin": "^1.2.3", "tinycolor2": "^1.4.2", "ts-jest": "^27.1.4", "ts-loader": "^4.5.0", "ts-shader-loader": "^1.0.6", "tss-react": "^3.6.2", "util": "^0.12.4", "uuid": "^8.3.2", "webpack": "^4.41.6", "webpack-cli": "^3.1.1", "webpack-merge": "^4.1.4", "webpack-simple-progress-plugin": "^0.0.4" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.27.1", "@typescript-eslint/parser": "^5.27.1", "copy-webpack-plugin": "^4.6.0", "eslint": "^8.17.0", "jest-extended": "^0.11.5", "source-map-loader": "^0.2.4", "ts-node": "^10.2.1", "typescript": "^4.7.3", "webpack-bundle-analyzer": "^4.4.2", "webpack-dev-server": "^3.11.0" }, "jest": { "verbose": true, "modulePathIgnorePatterns": [ ".*__mocks__.*" ], "testURL": "http://localhost/", "transform": { "^.+\\.tsx?$": "ts-jest" }, "testRegex": "(/test/.*|(\\.|/)(test|spec))\\.(ts?|tsx?)$", "moduleFileExtensions": [ "ts", "js", "tsx" ] }, "_id": "APP" }

tsconfig.json

 { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": false, "module": "commonjs", "target": "es5", "lib": ["es2016","dom", "es2017.object"], "allowJs": true, "declaration": false, "moduleResolution": "node", "jsx": "react", "types": ["jest"], "typeRoots": ["./types", "./node_modules/@types"] }, "include": [ "./src/**/*" , "**/*.test.ts" ], "exclude": [ "node_modules", "js" ] }

Answer 1

不知何故，在 compilerOptions 对象中添加一行"allowSyntheticDefaultImports" : true,到tsconfig.json有帮助，并且代码工作正常。