search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.54k stars 2.74k forks source link

JSX element class does not support attributes because it does not have a 'props' property. ts (2607) #16058

Closed jeffersoneagley closed 3 years ago

jeffersoneagley commented 3 years ago

Environment Information

This is for a component library that's consumed by multiple web portals on my team. I use typescript as a compiler and everything uses Create-React-App with nothing rewired and not ejected.

Note: I've been messing with these trying to cure the issue.

  "peerDependencies": {
    "@fluentui/react": ">= 7.145.0",
    "@fluentui/react-hooks": ">= 7.0.0",
     /* internal stuff skipped */
    "applicationinsights-js": ">= 1.0.0",
    "axios": ">= 0.21.0",
    "immutable": ">= 3.0.0",
    "lodash": ">= 4.17.0",
    "msal": ">= 1.3.2",
    "react": ">= 16.0.0",
    "react-dom": ">= 16.0.0",
    "react-router-dom": ">= 5.2.0",
    "react-scripts": ">= 3.4.0",
    "react-toastify": ">= 6.0.8"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.12.8",
    "@fluentui/react": "^7.153.0",
    "@fluentui/react-hooks": "^8.0.0-beta.0",
     /* internal stuff skipped */
    "@storybook/addon-actions": "^6.1.5",
    "@storybook/addon-controls": "^6.1.5",
    "@storybook/addon-docs": "^6.1.5",
    "@storybook/addon-essentials": "^6.1.5",
    "@storybook/addon-links": "^6.1.5",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.1.5",
    "@storybook/theming": "^6.1.5",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/react-hooks": "^3.4.2",
    "@testing-library/user-event": "^12.2.2",
    "applicationinsights-js": "^1.0.0",
    "axios": "^0.21.0",
    "cpy-cli": "^3.1.1",
    "husky": "^4.3.0",
    "immutable": "^3.8.2",
    "jsdoc": "^3.6.6",
    "lint-staged": "^10.5.2",
    "lodash": "^4.17.20",
    "msal": "^1.4.4",
    "node-sass": "^5.0.0",
    "nodemon": "^2.0.6",
    "npm-run-all": "^4.1.5",
    "parse-full-name": "^1.2.4",
    "prettier": "^2.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-is": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.4",
    "react-toastify": "^6.1.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.1.2",
    "webpack": "5.6.0",
    "yalc": "^1.0.0-pre.47",
    "yalc-watch": "0.0.6"
  },

Actual behavior:

I'm seeing the following error on basically all fluent components that act as a button in my package. image

Expected behavior:

Normally I can just import components without error.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) Yes, if I know what is broken

Requested priority: (Blocking, High, Normal, Low) Blocking

Products/sites affected: (if applicable) MSRC web

I see one other issue about this, but the user claims that a vscode update fixed the issue. I am running VSCode with all the latest updates to both code and its extensions.

Any suggestions? Did I miss something obvious? Even just a pointer where to look for conflicts would be welcome!

jeffersoneagley commented 3 years ago

I rolled back all my recent dependency updates by a week and am holding off on updates for a bit. Seems there's a version mismatch going on somewhere, but no clear indications where.

JustSlone commented 3 years ago

@jeffersoneagley, So this is upgrading the version of @fluentui/react and @fluentui/react-hooks? what was the version before the upgrade?

Also, it looks like you've picked up @fluentui/react-hooks 8.0.0 beta in your dev dependencies this likely isn't going to play nice with @fluentui/react version 7, you'll want to change this dependency to @uifabric/react-hooks 7.x. Not sure if that will cause the issue you are seeing, but it might. 

"devDependencies": {
    "@babel/core": "^7.12.8",
    "@fluentui/react": "^7.153.0",
    "@fluentui/react-hooks": "^8.0.0-beta.0", <--- 8.0.0 
     /* internal stuff skipped */

Also you'll want to update peerDependencies as well to use @uifabric/react-hooks 7.x and it may be a good idea to align the versions of @fluentui/react to either 7.145 or 7.153 between devDeps and peerDeps. 

  "peerDependencies": {
    "@fluentui/react": ">= 7.145.0",
    "@fluentui/react-hooks": ">= 7.0.0",
     /* internal stuff skipped */

If you still see the issue, let us know we can try to help more.

FYI @joschect, @ecraig12345

jeffersoneagley commented 3 years ago

FYI, npm i -D @fluentui/react-hooks@7 gives me:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @fluentui/react-hooks@7.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Was react-hooks private for v7.x?

jeffersoneagley commented 3 years ago

Oh, right... there was the big rename. For anyone who runs into this: @uifabric/react-hooks@7, not @fluentui/react-hooks@7

jeffersoneagley commented 3 years ago

Ok, just tried these:

and it's still throwing the error.

Here's an updated dependencies:

"devDependencies": {
    "@babel/core": "^7.12.3",
    "@fluentui/react": "^7.152.2",
    "@microsoft/applicationinsights-web": "^2.5.10",
    "@storybook/addon-a11y": "^6.1.6",
    "@storybook/addon-actions": "^6.0.28",
    "@storybook/addon-controls": "^6.0.28",
    "@storybook/addon-docs": "^6.0.28",
    "@storybook/addon-essentials": "^6.0.28",
    "@storybook/addon-links": "^6.0.28",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.0.28",
    "@storybook/theming": "^6.0.28",
    "@testing-library/jest-dom": "^5.11.3",
    "@testing-library/react": "^10.4.8",
    "@testing-library/react-hooks": "^3.4.2",
    "@testing-library/user-event": "^12.1.1",
    "@types/jest": "^26.0.9",
    "@types/lodash": "^4.14.159",
    "@types/node": "^14.0.27",
    "@types/react": "^16.14.0",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.6",
    "@uifabric/react-hooks": "^7.13.9",
    "applicationinsights-js": "^1.0.0",
    "axios": "^0.21.0",
    "babel-loader": "8.1.0",
    "cpy-cli": "^3.1.1",
    "eslint-plugin-jest-dom": "^3.1.7",
    "eslint-plugin-jsdoc": "^30.2.4",
    "eslint-plugin-testing-library": "^3.6.0",
    "husky": "^4.2.5",
    "immutable": "^3.8.2",
    "jsdoc": "^3.6.5",
    "lint-staged": "^10.2.11",
    "lodash": "^4.17.19",
    "msal": "^1.3.4",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.6",
    "npm-run-all": "^4.1.5",
    "parse-full-name": "^1.2.4",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-is": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-test-renderer": "^16.13.1",
    "react-toastify": "^6.0.8",
    "rimraf": "^3.0.2",
    "typescript": "^3.9.7",
    "webpack": "4.42.0",
    "yalc": "^1.0.0-pre.45",
    "yalc-watch": "0.0.6"
  },

This appears to be related? https://github.com/microsoft/TypeScript/issues/14881

ecraig12345 commented 3 years ago

Sorry about the no recent activity bot comment--it should have automatically removed the "needs author feedback" label when you commented earlier this week, but the bot was temporarily broken at the time.

Regarding the actual issue, I can't look into it right this minute but I'll try and take a look in the next couple days (since weird typing/deps issues are an area I've worked with a lot).

ecraig12345 commented 3 years ago

Finally got to take a look at this (sorry for the delay). I can't repro the issue you described using a basic create-react-app project I created with your same dependency list--probably because some deps resolved to slightly different versions in a new repo without an existing yarn.lock. So without seeing your full yarn.lock and tsconfig.json, it's hard to say exactly what's wrong.

My guess based on dealing with similar issues is that you've ended up with multiple versions of @types/react, @types/react-dom, and/or typescript in your repo. This doesn't always cause problems, but it sometimes can, especially when * is used as the version specifier (which is common with @types, e.g. "@types/react": "*"). You can check whether you have multiple versions by looking at yarn.lock. For example:

"@types/react@*":
  version "17.0.0"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
  integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
  dependencies:
    "@types/prop-types" "*"
    csstype "^3.0.2"

"@types/react@^16", "@types/react@^16.14.0":
  version "16.14.2"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
  dependencies:
    "@types/prop-types" "*"
    csstype "^3.0.2"

In cases like this where all the semver specs used for a dep anywhere in the dependency graph can be resolved to the same version (e.g. @types/react@16.14.2 satisfies *, ^16, and ^16.14.0), you can get rid of the duplicate by adding resolutions in package.json:

{
  "resolutions": {
    "@types/react": "^16.14.0"
  }
}

If this doesn't help, feel free to message me on Teams so we can look at the actual code and debug further.

msft-fluent-ui-bot commented 3 years ago

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

jeffersoneagley commented 3 years ago

Update on this:

We found out that I had a global/ambient type declaration that, by "requiring" react and then storing it as a const, was accidentally redefining react globally. I do this to avoid using "import" to allow this type to be ambient (makes it available everywhere), but that also made the const react =... available everywhere, thus confusing typescript. image