Clean Install of Storybook for React Native causes TypeScript compiler error

[cjduncana]

Describe the bug
If I run the TypeScript compiler to review the errors in my project, it reports errors from:

• @storybook/addons
• @storybook/client-api
• @types/reach__router

The last one is used by @storybook/router as mentioned in #8095. By using what is suggested in that issue, I can remove only one of the seventeen errors. I started with a clean build of React Native and I have no problems. Once I install the clean build of Storybook, I get the errors.

To Reproduce

1. npx react-native init AwesomeTSProject --template react-native-template-typescript --npm
2. cd AwesomeTSProject/
3. npx -p @storybook/cli sb init --use-npm --type react_native
4. npx tsc

Expected behavior
I expect the TypeScript compiler to not throw any errors.

Command Line Output

node_modules/@storybook/addons/dist/types.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.

1 /// <reference types="node" />
                        ~~~~

node_modules/@storybook/client-api/dist/client_api.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.

1 /// <reference types="node" />
                        ~~~~

node_modules/@storybook/client-api/dist/config_api.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.

1 /// <reference types="node" />
                        ~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:1:23 - error TS2688: Cannot find type definition file for 'lodash/common/common'.

1 /// <reference types="lodash/common/common" />
                        ~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:2:23 - error TS2688: Cannot find type definition file for 'lodash/common/array'.

2 /// <reference types="lodash/common/array" />
                        ~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:3:23 - error TS2688: Cannot find type definition file for 'lodash/common/collection'.

3 /// <reference types="lodash/common/collection" />
                        ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:4:23 - error TS2688: Cannot find type definition file for 'lodash/common/date'.

4 /// <reference types="lodash/common/date" />
                        ~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:5:23 - error TS2688: Cannot find type definition file for 'lodash/common/function'.

5 /// <reference types="lodash/common/function" />
                        ~~~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:6:23 - error TS2688: Cannot find type definition file for 'lodash/common/lang'.

6 /// <reference types="lodash/common/lang" />
                        ~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:7:23 - error TS2688: Cannot find type definition file for 'lodash/common/math'.

7 /// <reference types="lodash/common/math" />
                        ~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:8:23 - error TS2688: Cannot find type definition file for 'lodash/common/number'.

8 /// <reference types="lodash/common/number" />
                        ~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:9:23 - error TS2688: Cannot find type definition file for 'lodash/common/object'.

9 /// <reference types="lodash/common/object" />
                        ~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:10:23 - error TS2688: Cannot find type definition file for 'lodash/common/seq'.

10 /// <reference types="lodash/common/seq" />
                         ~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:11:23 - error TS2688: Cannot find type definition file for 'lodash/common/string'.

11 /// <reference types="lodash/common/string" />
                         ~~~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:12:23 - error TS2688: Cannot find type definition file for 'lodash/common/util'.

12 /// <reference types="lodash/common/util" />
                         ~~~~~~~~~~~~~~~~~~

node_modules/@storybook/client-api/dist/story_store.d.ts:50:42 - error TS7016: Could not find a declaration file for module 'lodash'. '/Users/cjduncana/Development/personal/rngmtf/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm install @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

50     pushToManager: (() => void) & import("lodash").Cancelable;
                                            ~~~~~~~~

node_modules/@types/reach__router/index.d.ts:14:30 - error TS2304: Cannot find name 'Window'.

14 export type WindowLocation = Window['location'] & HLocation;
                                ~~~~~~


Found 17 errors.

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v11.12.0/bin/npm
Browsers:
Chrome: 81.0.4044.122
Firefox: 70.0.1
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-knobs: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-knobs: ^5.3.18 => 5.3.18
@storybook/addons: ^5.3.18 => 5.3.18
@storybook/react-native: ^5.3.18 => 5.3.18

[tsvetan-ganev]

I was able to remove the errors caused by lodash by installing its type definitions:

npm i -D @types/lodash@4.14.160

Then go to your package.json and remove the ~ or ^ in front of the version:

    "@types/lodash": "4.14.160"

If you install the latest version of the type definitions you will encounter the following error:

node_modules/@storybook/client-api/dist/story_store.d.ts:50:42 - error TS7016: Could not find a declaration file for module 'lodash'. '/Users/tsetso/git/howthrive/HowThriveApp/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm install @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

50     pushToManager: (() => void) & import("lodash").Cancelable;

That's why you must explicitly forbid any possible updates to this package (even minor ones usually cause breaking changes in type definitions).

To remove the error caused by the missing Window object, create a index.d.ts file if you don't already have one and add this:

declare global {
  interface Window {
    location: any;
  }
}