Storybook: Cannot find type definition file for 'webpack-env'

[magbicaleman]

Describe the bug
Just importing _addParameters_ into my story causes the build to break. It does not launch when you run yarn storybook or npm run storybook

* Error *

ERROR in .../node_modules/@storybook/angular/dist/client/preview/index.d.ts
ERROR in .../node_modules/@storybook/angular/dist/client/preview/index.d.ts(2,23):
TS2688: Cannot find type definition file for 'webpack-env'.

To Reproduce
Steps to reproduce the behavior:

1. Import addParameters into your story

Expected behavior
Works...

Code snippets

import { addParameters} from '@storybook/angular';

System:

 npx -p @storybook/cli@next sb init --type angular

Additional context
I had to install the @next cli, because of a different bug in Angular and Storybook.

Dev Dependencies

    "@storybook/addon-actions": "^5.2.0-beta.39",
    "@storybook/addon-backgrounds": "^5.1.11",
    "@storybook/addon-links": "^5.2.0-beta.39",
    "@storybook/addon-notes": "^5.2.0-beta.39",
    "@storybook/addons": "^5.2.0-beta.39",
    "@storybook/angular": "^5.2.0-beta.39",

[magbicaleman]

This hasn't been fixed in beta.40 either. Just in case anyone was wondering.

[magbicaleman]

To fix install types for webpack by;

npm install --save-dev webpack-env

After looking at the node_modules/@storybook/angular/dist/client/preview/index.d.ts
I commented out the reference and it did not break my build, I then googled reference types and webpack-env.

These types did not get included by the ng cli tool when creating a project.

[magbicaleman]

Nevermind the above did not fix anything. What I did that seemed like it fixed it was commenting out that reference in line 2 of node_modules/@storybook/angular/dist/client/preview/index.d.ts

[VladislavLobakh]

@shilman is it going to be fixed on any RC?

[shilman]

@VladislavLobakh PRs welcome. It's too late for 5.3 but I can merge it into 5.3 right after 5.2 goes live.

[VladislavLobakh]

@shilman it's a critical issue because we can't run it on Angular 8 :(
Could you fix it ASAP?

[shilman]

@VladislavLobakh No I'm not familiar with angular. Can you fix it?

[kroeder]

Can confirm this.

@VladislavLobakh If you can, use skipLibCheck: true as a workaround until this is solved
Please let me know if this workaround doesn't work for you!

Edit Another workaround is installing the types for webpack-env => npm i -D @types/webpack-env

I try to figure out what's wrong later this week

Example .storybook/tsconfig.json

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "node"
    ],
    "skipLibCheck": true
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

[kroeder]

I was looking into this issue and found that @storybook/angular/dist/preview/index.d.ts contains

/// <reference types="webpack-env" />

I don't know why this is getting added to the prod build. I haven't found anything related in src/ but that's where my webpack knowledge ends.

That said, there's another workaround: npm i -D @types/webpack-env

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-rc.10 containing PR #8036 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[VladislavLobakh]

Unhandled Promise rejection: Expected 'styles' to be an array of strings. ; Zone: <root> ; Task: setTimeout ; Value: Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (compiler.js:5668)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:21024)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:20947)
    at compiler.js:27383

@shilman do you have any ideas about it? I'm running the story book, but it's in the console of the browser. As I understand it doesn't work with angular cli 8.3.x (according to https://github.com/storybookjs/storybook/issues/7877)

[shilman]

@VladislavLobakh that's a separate issue, and I believe @kroeder (who solved this issue) is working on that now.

[astorije]

Hey @shilman, we are in the process of upgrading from 5.1.1 to 5.2.1 and we are still seeing this issue (and then some):

ERROR in [at-loader] ./node_modules/@storybook/react/dist/client/preview/index.d.ts:2:23
    TS2688: Cannot find type definition file for 'webpack-env'.

ERROR in [at-loader] ./node_modules/@storybook/addon-knobs/dist/components/types/Color.d.ts:3:29
    TS7016: Could not find a declaration file for module 'react-color'. '/Users/jeremie/GitHub/CloudHealth/cht-ui-component-lib/node_modules/react-color/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-color` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-color';`

ERROR in [at-loader] ./node_modules/@storybook/node-logger/dist/index.d.ts:1:20
    TS7016: Could not find a declaration file for module 'npmlog'. '/Users/jeremie/GitHub/CloudHealth/cht-ui-component-lib/node_modules/npmlog/log.js' implicitly has an 'any' type.
  Try `npm install @types/npmlog` if it exists or add a new declaration (.d.ts) file containing `declare module 'npmlog';`

For context, here is everything related to storybook in our package.json:

    "@storybook/addon-a11y": "5.2.1",
    "@storybook/addon-actions": "5.2.1",
    "@storybook/addon-knobs": "5.2.1",
    "@storybook/addon-notes": "5.2.1",
    "@storybook/addons": "5.2.1",
    "@storybook/node-logger": "5.2.1",
    "@storybook/react": "5.2.1",
    "@storybook/theming": "5.2.1",

And we run it with:

"storybook": "start-storybook --config-dir storybook --port 9001 --static-dir .",

All the errors above disappear when re-adding "skipLibCheck": true in the tsconfig.json file (which I was hoping to remove now that https://github.com/storybookjs/storybook/issues/7069 / https://github.com/storybookjs/storybook/pull/7072 have been shipped in 5.2.x).

If that's any useful, here is our tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "es2015", "es2017", "esnext.asynciterable"],
    "jsx": "react",
    "declaration": true,
    "preserveWatchOutput": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
      "react": ["node_modules/@types/react"]
    },
    "outDir": "../storybook_dist",
    "skipLibCheck": true
  }
}

Any idea how to fix this?

[kroeder]

I saw that a lot of packages added webpack env to the types property of tsconfig.json

I was able get rid of it in angular but I'm not sure why it was added in the first place.

If this is a trouble maker we can try to get rid of this again. Or add an explicit dependency on webpack-env in storybook/core

[astorije]

If this is a trouble maker we can try to get rid of this again. Or add an explicit dependency on webpack-env in storybook/core

This would be wonderful, thanks in advance!

[hectormerla]

I just updated to 5.2.1 and now I have the following errors:

ERROR in [at-loader] ./node_modules/@storybook/addons/dist/types.d.ts:1:23
    TS2688: Cannot find type definition file for 'node'.

ERROR in [at-loader] ./node_modules/@storybook/react/dist/client/preview/index.d.ts:1:23
    TS2688: Cannot find type definition file for 'node'.

ERROR in [at-loader] ./node_modules/@storybook/addon-knobs/dist/components/types/Color.d.ts:3:29
    TS7016: Could not find a declaration file for module 'react-color'. '/Users/kbmt/Documents/projects/kinedu-react-components/node_modules/react-color/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-color` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-color';`

Is there any news about this issue?

The "skipLibCheck": true is a good workaround for making it work but it doesn't show the knobs addon.

For now I think we need to go back to the pervious stable version until a fix for this is ready.

UPDATE:
Apparently the knobs not showing was another issue, I solved it by typing "D" (changing the addons orientation), that make the addons appear again, so now it seems to be working fine with the latest version, but still we have to use the "skipLibCheck": true.

[shilman]

I'll release a patch PR later today that will hopefully fix some if not all of these issues.

[robaxelsen]

@shilman Thanks! Is there anywhere I can track when the mentioned PR will be part of a new stable release, like a milestone?

For reference, this is also affecting Stencil.js projects with Storybook.

[shilman]

@robaxelsen This is the PR and it looks like it's only for a few packages, and won't fix the stencil problem: https://github.com/storybookjs/storybook/pull/8119

Would you be able to create an analogous PR for that?

[robaxelsen]

@robaxelsen This is the PR and it looks like it's only for a few packages, and won't fix the stencil problem: #8119

Would you be able to create an analogous PR for that?

Thanks. We're using @storybook/html, and I just tested 5.2.1 with explicitly installed @types/webpack-env on top, and that fixes the issue. Am I then right, having looked at the references PR, that the addition of @types/webpack-env there should fix my issue? If not, or uncertain, I would need pointers in what package/s to make the analogous PR for.

[shilman]

@robaxelsen Oops, I missed that! SMH. Ok I'll patch that in and comment here when it's ready. Thanks for your patience.

[robaxelsen]

@robaxelsen Oops, I missed that! SMH. Ok I'll patch that in and comment here when it's ready. Thanks for your patience.

Any update on this?

[shilman]

@robaxelsen it's been patched, available in the latest 5.2.x!

[astorije]

@shilman, I can confirm that part of this got fixed (the webpack-env and react-color parts of my earlier comment) but still getting that issue about npmlog:

ERROR in [at-loader] ./node_modules/@storybook/node-logger/dist/index.d.ts:1:20
    TS7016: Could not find a declaration file for module 'npmlog'. '/Users/jeremie/GitHub/CloudHealth/cht-ui-component-lib/node_modules/npmlog/log.js' implicitly has an 'any' type.
  Try `npm install @types/npmlog` if it exists or add a new declaration (.d.ts) file containing `declare module 'npmlog';`

Any further idea?

[shilman]

@kroeder @ndelangen Thoughts on typedefs for npmlog for @astorije ?

[robaxelsen]

@robaxelsen it's been patched, available in the latest 5.2.x!

Great, thank you so much :heart_eyes:

[robaxelsen]

@robaxelsen it's been patched, available in the latest 5.2.x!

Great, thank you so much

I can confirm that this fixed the issue also for a stencil project with storybook.

[astorije]

@kroeder @ndelangen Thoughts on typedefs for npmlog for @astorije ?

Hey @shilman, any further thoughts on this?

[shilman]

@astorije sorry typescript newb here. hoping @ndelangen @kroeder @gaetanmaisse can help you out

[cloakedninjas]

I'm getting this error using the following packages

"@storybook/addon-actions": "^5.3.6",
"@storybook/addon-docs": "^5.3.6",
"@storybook/addon-knobs": "^5.3.6",
"@storybook/addon-storyshots": "^5.3.6",
"@storybook/addons": "^5.3.6",
"@storybook/angular": "^5.3.6",
"@storybook/cli": "^5.3.6",

ERROR in ../../node_modules/@storybook/client-api/dist/client_api.d.ts:2:23 - error TS2688: Cannot find type definition file for 'webpack-env'.

2 /// <reference types="webpack-env" />
                        ~~~~~~~~~~~
../../node_modules/@storybook/client-api/dist/config_api.d.ts:2:23 - error TS2688: Cannot find type definition file for 'webpack-env'.

2 /// <reference types="webpack-env" />
                        ~~~~~~~~~~~
../../node_modules/@storybook/addon-storyshots/dist/frameworks/Loader.d.ts:2:23 - error TS2688: Cannot find type definition file for 'webpack-env'.

2 /// <reference types="webpack-env" />
                        ~~~~~~~~~~~

Running npm i -D @types/webpack-env fixes it - but I thought this was resolved in 5.2 🤔

[shilman]

@cloakedninjas can you try removing node_modules & reinstalling? possibly regenerating lock files?

[cloakedninjas]

No joy

[shilman]

Can confirm that it's dependency in @storybook/react, @storybook/html, and a bunch of others ... but NOT in @storybook/angular.

@ndelangen @kroeder @gaetanmaisse can we add this?

[gaetanmaisse]

I think "types": ["webpack-env"] in tsconfig.json have been propagated from lib to lib because in the "Initial steps for every migration" of https://github.com/storybookjs/storybook/issues/5030 we use addon-notes as a base example but it looks like this addon is using webpack-env. Almost all libs have surely inherited from it but only a few should really need/use it.

I will go through all libs and try to remove this where it's useless and add @types/webpack-env dep when needed.

[gaetanmaisse]

I hope this one, https://github.com/storybookjs/storybook/pull/9536, will fix this @types/webpack-env issue for good!

[gaetanmaisse]

And https://github.com/storybookjs/storybook/pull/9538 should fix @astorije issue with npmlog types.

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.7 containing PR #9538 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[gaetanmaisse]

Reopening this issue, it should/will 🤞 be fixed by #9536.

[cloakedninjas]

Just checked and sadly 5.3.7 hasn't fixed it, still seeing those reference errors in

• @storybook/client-api/dist/client_api.d.ts
• @storybook/client-api/dist/config_api.d.ts
• @storybook/addon-storyshots/dist/frameworks/Loader.d.ts

[gaetanmaisse]

@cloakedninjas 5.3.7 does not contain the fix (#9536). That's why I reopened this issue ;)

@shilman do you plan to publish a 5.3.8 soon?

[shilman]

@gaetanmaisse Yes, in the day hopefully.

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.8 containing PR #9536 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[stefanprobst]

note that the @types/webpack-dev dependency leads to a minor issue in projects that also have @types/parcel-env: Interface 'NodeModule' cannot simultaneously extend types 'Module' and 'Module'

[clintandrewhall]

I now have this problem after upgrading to 5.3.19, with addon-storyshots:

node_modules/@storybook/addon-storyshots/dist/frameworks/Loader.d.ts:2:23 - error TS2688: Cannot find type definition file for 'webpack-env'.

      2 /// <reference types="webpack-env" />