Polaris-react: Typescript Types Error

[qw-in]

Issue summary

Please also see @wvl's comment below as this appears to be a more general ts issue

When using 3.0.0 with create-react-app & typescript there is an error during typescripts library check

Issue at node_modules/@shopify/polaris/types/components/Navigation/components/UserMenu/index.d.ts

Type error: Cannot find module './UserMenu.scss'.  TS2307

    1 | import UserMenu from './UserMenu';
  > 2 | import * as styles from './UserMenu.scss';
      |                         ^
    3 | export { Props } from './UserMenu';
    4 | export { styles };

An easy workaround right now for anyone else experiencing this is to change skipLibCheck in your tsconfig.json

"skipLibCheck": true,

Or alternatively @BPScott suggested an alternative solution below

Expected behavior

Types are checked without error. I have checked and after removing the .scss import typescript is happy again

Steps to reproduce the problem

1. Create a create-react-app project
2. Change index.js to index.tsx
3. Install polaris (and import something)
4. Run

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.0.0
• Browser: Chrome
• Device: Desktop
• Operating System: Linux

[BPScott]

Polaris currently builds using Typescript 2.9.1. We are aware of some issues using Typescript 3 that are blocking our upgrade.

Though I don't think that's your issue at the moment. It sounds like you might need to setup module declarations like https://github.com/Shopify/polaris-react/blob/master/config/typescript/styles.d.ts. There are others declarations in that folder that you may also need.

[qw-in]

@BPScott Thanks! New to typescript so was not aware of that trick. Could it be bundled with polaris in the future or does that not make sense?

Probably more of a docs issue thing anyway

[BPScott]

From what I understand of typescript, those module declarations are per-project rather than something that gets pulled in from depdendencies.

I'd have to try and run everything through CRA to get stuff up and running personally to be sure of the best approach.

[wvl]

I believe this is a real issue, and should be re-opened. It is more than a create-react-app issue, but any typescript project that references polaris 3.0.0 (with library type checking turned on).

@BPScott -- you're right, that consumers of Polaris can work around this file by adding the module declaration to ignore '*.scss' files. However, one can use polaris without using scss at all, so this shouldn't be needed. Currently this mistaken import in the typescript definition files is blocking typescript projects from using polaris without this workaround.

It looks like you are generating the typescript definition files on publish. I don't understand that process, but it seems that the scss import from a tsx file is being stripped by the compiler, but left in when imported from a .ts file. From a quick scan of the source, the only time the scss file is being referenced from a .ts file, (and not a .tsx) is from this UserMenu component (and the very root index.ts file of the project).

polaris-react/src> Ack scss . | grep index
components/Navigation/components/UserMenu/index.ts:2:import styles from './UserMenu.scss';
index.ts:1:import './styles/global.scss';

I believe this UserMenu.scss import from the index.ts file can simply be removed, since it is already being imported from the UserMenu.tsx component implementation.

[BPScott]

@wvl Thank you for looking into this further and pointing me in the right direction. You are right that we shouldn't have references to scss files in index.ts files.

I have removed the offending import in #609 which I believe should fix this issue.

I'll leave this issue open for now and hopefully yourself or @qw-in can confirm the fix when we push out a point release.

[wvl]

Great! Thanks BPScott for the fix, and qw-in for re-opening.

[BPScott]

Hi both, we released 3.0.1 earlier today. Can you try using that to see if it fixes your issue?

Let me know if it works so we can close this issue.

[qw-in]

Thanks for the fix! I am out of office until Friday but can close the issue if @wvl can verify.

[wvl]

Yes that fixes it -- I was able to remove the workaround. Thanks!

[BPScott]

Hurrah! Thank you for following up.