Cannot find type definition file for 'webpack-env' #7855

magbicaleman · 2019-08-23T18:05:16Z

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:

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",

The text was updated successfully, but these errors were encountered:

magbicaleman · 2019-08-23T18:57:12Z

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

magbicaleman · 2019-08-23T19:14:17Z

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 · 2019-08-23T19:38:43Z

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 · 2019-09-03T12:22:02Z

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

shilman · 2019-09-03T12:56:44Z

@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 · 2019-09-04T09:49:14Z

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

shilman · 2019-09-04T10:51:49Z

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

kroeder · 2019-09-04T11:10:02Z

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 · 2019-09-05T06:24:28Z

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 · 2019-09-09T22:04:16Z

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 · 2019-09-10T14:59:01Z

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 #7877)

shilman · 2019-09-10T19:33:39Z

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

astorije · 2019-09-17T17:49:45Z

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 #7069 / #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 · 2019-09-17T18:21:31Z

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 · 2019-09-17T19:11:26Z

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 · 2019-10-03T20:11:22Z

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 · 2019-10-04T05:59:23Z

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

shilman · 2019-10-19T01:59:29Z

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

astorije · 2019-10-19T04:44:33Z

@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 · 2019-10-19T08:53:25Z

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

robaxelsen · 2019-10-19T08:56:06Z

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

Great, thank you so much 😍

robaxelsen · 2019-10-21T10:49:12Z

@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 · 2019-10-22T16:30:51Z

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

Hey @shilman, any further thoughts on this?

shilman · 2019-10-24T12:53:01Z

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

cloakedninjas · 2020-01-17T08:45:46Z

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 · 2020-01-17T08:58:16Z

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

cloakedninjas · 2020-01-17T12:16:53Z

No joy

shilman · 2020-01-17T13:07:17Z

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 · 2020-01-18T08:53:05Z

I think "types": ["webpack-env"] in tsconfig.json have been propagated from lib to lib because in the "Initial steps for every migration" of #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 · 2020-01-19T12:17:54Z

I hope this one, #9536, will fix this @types/webpack-env issue for good!

gaetanmaisse · 2020-01-19T12:31:42Z

And #9538 should fix @astorije issue with npmlog types.

shilman · 2020-01-20T07:20:16Z

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 · 2020-01-20T07:38:13Z

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

cloakedninjas · 2020-01-21T08:25:11Z

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 · 2020-01-21T08:49:26Z

@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 · 2020-01-21T13:03:54Z

@gaetanmaisse Yes, in the day hopefully.

shilman · 2020-01-21T17:20:39Z

¡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 · 2020-02-24T21:59:24Z

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 · 2020-07-30T22:06:44Z

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" />

magbicaleman closed this as completed Aug 23, 2019

magbicaleman reopened this Aug 23, 2019

shilman added angular question / support labels Aug 23, 2019

shilman added this to the 5.2.0 milestone Aug 23, 2019

shilman added the high priority label Sep 4, 2019

kroeder added the has workaround label Sep 4, 2019

kroeder mentioned this issue Sep 9, 2019

Angular: remove webpack-env from tsconfig types #8036

Merged

shilman closed this as completed Sep 9, 2019

kroeder reopened this Sep 19, 2019

shilman modified the milestones: 5.2.0, 5.2.x Sep 23, 2019

Haroenv mentioned this issue Oct 1, 2019

chore(stories): add categories algolia/instantsearch#4154

Merged

shilman closed this as completed Oct 22, 2019

shilman reopened this Jan 17, 2020

gaetanmaisse mentioned this issue Jan 19, 2020

Clean usage of @types/webpack-env dep in all packages #9536

Merged

gaetanmaisse mentioned this issue Jan 19, 2020

Node-logger: Move @types/npmlog to dependencies #9538

Merged

shilman closed this as completed Jan 20, 2020

gaetanmaisse reopened this Jan 20, 2020

shilman closed this as completed Jan 21, 2020

gaetanmaisse mentioned this issue Sep 28, 2020

Move @types/webpack-env to devDependencies #12546

Closed

Cannot find type definition file for 'webpack-env' #7855

Cannot find type definition file for 'webpack-env' #7855

Comments

magbicaleman commented Aug 23, 2019

magbicaleman commented Aug 23, 2019

magbicaleman commented Aug 23, 2019

magbicaleman commented Aug 23, 2019

VladislavLobakh commented Sep 3, 2019

shilman commented Sep 3, 2019

VladislavLobakh commented Sep 4, 2019

shilman commented Sep 4, 2019

kroeder commented Sep 4, 2019 • edited Loading

kroeder commented Sep 5, 2019

shilman commented Sep 9, 2019

VladislavLobakh commented Sep 10, 2019

shilman commented Sep 10, 2019

astorije commented Sep 17, 2019

kroeder commented Sep 17, 2019

astorije commented Sep 17, 2019

hectormerla commented Oct 3, 2019 • edited Loading

shilman commented Oct 4, 2019

shilman commented Oct 19, 2019

astorije commented Oct 19, 2019

shilman commented Oct 19, 2019

robaxelsen commented Oct 19, 2019 • edited Loading

robaxelsen commented Oct 21, 2019 • edited Loading

astorije commented Oct 22, 2019

shilman commented Oct 24, 2019

cloakedninjas commented Jan 17, 2020

shilman commented Jan 17, 2020

cloakedninjas commented Jan 17, 2020

shilman commented Jan 17, 2020

gaetanmaisse commented Jan 18, 2020 • edited Loading

gaetanmaisse commented Jan 19, 2020 • edited Loading

gaetanmaisse commented Jan 19, 2020

shilman commented Jan 20, 2020

gaetanmaisse commented Jan 20, 2020

cloakedninjas commented Jan 21, 2020

gaetanmaisse commented Jan 21, 2020

shilman commented Jan 21, 2020

shilman commented Jan 21, 2020

stefanprobst commented Feb 24, 2020

clintandrewhall commented Jul 30, 2020

kroeder commented Sep 4, 2019 •

edited

Loading

hectormerla commented Oct 3, 2019 •

edited

Loading

robaxelsen commented Oct 19, 2019 •

edited

Loading

robaxelsen commented Oct 21, 2019 •

edited

Loading

gaetanmaisse commented Jan 18, 2020 •

edited

Loading

gaetanmaisse commented Jan 19, 2020 •

edited

Loading