question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Integration with typescript appears to be broken when using latest deps

See original GitHub issue

Describe the issue. What is the expected and unexpected behavior?

On the latest releases of patternfly/typescript, a number of components complain about the css property not being set.

2020-02-25-180051_1036x317_scrot

Error message in text:

Property 'css' is missing in type '{ children: string; variant: "primary"; }' but required in type 'Pick<ButtonProps & InjectedOuiaProps, "ref" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "children" | ... 359 more ... | "icon">'.  TS2741

I’ve done my due diligence here and tried to see if I can fix it myself and came across a number of related issues in other repos over the years.

The emotion repo is the most prominent that suffered from it a while ago: https://github.com/emotion-js/emotion/issues/1249

With the fix being to add emotion types to compilerOptions: https://github.com/emotion-js/emotion/issues/1249#issuecomment-494428888

Adding:

"compilerOptions": {
    "types": ["@patternfly/react-core"]
}

Does not fix the issue.

I tried clearing my yarn.lock and node_modules and reinstalling and this did not fix either.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

create-react-app test-issue --template typescript
yarn add @patternfly/react-core @patternfly/patternfly
# Add a button somewhere
yarn install && yarn start
# error

I’ve included a repo I made a few minutes ago to demonstrate the error here.

https://gitlab.com/DarrienG/ts-patternfly-issue

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

The only workaround I can see is not upgrading my deps.

What is your product and what release version are you targeting?

I’ve included the info in the repo, but these are the patternfly versions that have the issue:

    "@patternfly/patternfly": "2.65.3",
    "@patternfly/react-core": "3.140.11",

Using node 13.8.0, yarn v1.22.0 (all latest) on Ubuntu 19.10 (sorry not fedora).

Upgrading from "@patternfly/react-core": "3.134.2 and "typescript": "3.7.2" to "typescript": "3.7.4"

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
redallencommented, Mar 27, 2020

Hey @DarrienG , we’re releasing Monday March 31 or Tuesday April 1. In the meantime you can try our prerelease package which is @patternfly/react-core@^3.152.0.

1reaction
DarrienGcommented, Mar 13, 2020

Confirming it is still not fixed on the latest release.

My assumption is that the fix hasn’t been made into an official release yet.

Current latest version with the issue: @patternfly/react-core@3.146.0

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix the upstream dependency conflict installing NPM packages
It looks like it's a problem with peer dependencies in the latest version of npm (v7) which is still a beta version. Try...
Read more >
Documentation - Migrating from JavaScript - TypeScript
Converting a JavaScript codebase over to TypeScript is, while somewhat tedious, usually not challenging. In this tutorial, we're going to look at how...
Read more >
How to Upgrade to TypeScript Without Anybody Noticing, Part 1
How can you upgrade with so little change? Well, the secret is that you're not using TypeScript. The TypeScript compiler can check Javascript ......
Read more >
Linting in TypeScript using ESLint and Prettier - LogRocket Blog
Integrate Prettier with ESLint to automate type-checking in your TypeScript code and ensure that the code has no bugs.
Read more >
Typescript does not resolve modules through tsconfig.json's ...
Unfortunately still seeing this issue. I have `moduleResolution: node` set as well. It seems that Webstorm is struggling to re-index and find ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found