Polaris-react: Context typings broken on Typescript 3

[sdn90]

This probably needs to be fixed upstream on Typescript or the React typings. Just posting here in case anyone else runs into it as it took me a long time to figure this out.

Issue summary

Typescript type checking fails

[tsl] ERROR in [removed]/src/index.tsx(17,8)
      TS2322: Type '{ children: any; onClick: () => void; id: any; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes<Item> & Readonly<{ children?: ReactNode; }> & Readonly<PropsWithUrl & WithAppProviderProps & WithContextTypes<ResourceListContext>>) | (IntrinsicAttributes & ... 2 more ... & Readonly<...>)'.
  Type '{ children: any; onClick: () => void; id: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Item> & Readonly<{ children?: ReactNode; }> & Readonly<PropsWithClick & WithAppProviderProps & WithContextTypes<ResourceListContext>>'.
    Type '{ children: any; onClick: () => void; id: any; }' is missing the following properties from type 'Readonly<PropsWithClick & WithAppProviderProps & WithContextTypes<ResourceListContext>>': polaris, context

Reduced test case

It's working on Code Sandbox, but doesn't work locally for me. Might be an issue with Yarn.
https://codesandbox.io/s/rwx66pvo0o

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.1.1

[AndrewMusgrave]

👋 Hi @sdn90 is the code sandbox identical to your local setup where your getting the type issue?

[dpersing]

Hi @sdn90. Just wanted to see if you're still experiencing this issue, and to confirm Andrew's question. Thanks!

[sdn90]

Hey @dpersing @AndrewMusgrave,

The Code Sandbox is not identical. I'm using Webpack locally and I'm not sure if Code Sandbox supports it. Also I wasn't able to figure out how Code Sandbox resolves dependencies so I can't confirm its building using the same exact versions.

I ran it through a Docker container and got the same error.

Here's the exact code I'm using:

/package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@shopify/polaris": "^3.1.1",
    "prop-types": "^15.6.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.2",
    "@types/react": "^16.7.13",
    "@types/react-dom": "^16.0.11",
    "ts-loader": "^5.3.1",
    "typescript": "^3.1.0",
    "webpack": "^4.27.0"
  }
}

/tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "jsx": "react"
  },
  "exclude": ["node_modules"]
}

/webpack.config.js

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  module: {
    rules: [{ use: "ts-loader", test: /\.tsx?/ }]
  }
};

/src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ResourceList, AppProvider } from "@shopify/polaris";
import { object } from "prop-types";

class List extends React.Component<{}, {}> {
  context: any;
  static contextTypes = {
    polaris: object
  };
  constructor(props, context) {
    super(props);
    this.context = context;
  }
  renderItem = (item, id) => {
    return (
      <ResourceList.Item onClick={() => {}} id={item.title}>
        {item.title}
      </ResourceList.Item>
    );
  };
  render() {
    const items = [{ title: "Hi" }];
    return (
      <div>
        <AppProvider>
          <ResourceList items={items} renderItem={this.renderItem} />
        </AppProvider>
      </div>
    );
  }
}

ReactDOM.render(
  <AppProvider apiKey="">
    <List />
  </AppProvider>,
  document.getElementById("app")
);

Tested using npm 6.4.1 and yarn 1.12.3. Deleted node_modules and lockfile before installing.

[BPScott]

@sdn90: What version of typescript are you using? I'm guessing v3.2.x?

[sgargan]

I'm was seeing this issue, with v3.2.1, downgrading to 3.1.3 everything compiles correctly.

[BPScott]

Thanks @sgargan. We currently compile with 2.9.1. I've got a PR to upgrade to 3.1.6 almost ready to merge.

I saw similar type issues with context and composing props within our code when I attempted to update to 3.2 so I believe this is due to a breaking change in TS 3.2 but I'll need more time to dig deeper to work out how to fix it and find out if it can be fixed for all versions of TypeScript in one go rather than making consumers update their version of TypeScript.

For now I think the safest bet is to stick with TypeScript 3.1.x

[sdn90]

@BPScott, yup I was using 3.2.x. I'm getting the same result as @sgargan as well. I locked to ~3.1.x and it compiles.

[ptcampbell]

In which version of Polaris has this error been solved? I can get it to build (TS 3.1.x) but the IDE is still giving warnings inline.

[BPScott]

Hi @ptcampbell, we're currently using typescript 3.1.6 within the project

[AndrewMusgrave]

@ptcampbell , if you'r using vscode it's possible your editor is using a different version of TS. If you have a typescript file open, you should see the version in the bottom right.

[ptcampbell]

@AndrewMusgrave you're absolutely right, thank you!

[BPScott]

Heya folks, thanks for your patience on this. I've just merged https://github.com/Shopify/polaris-react/pull/1388 which updates us to using TypeScript 3.2 and fixes type issues with react-compose. This will be in our next release 3.14.0, which will probably go out in the next week or so. Hopefully this should fix your context typing issues and you should be able to use Polaris in your TypeScript >=3.2 project.