Storybook: Issue while using storybookjs Knobs Addon @5.3.19 in Angular 7 Workspace

Created on 2 Jul 2020 · 7Comments · Source: storybookjs/storybook

Describe the bug

When I installed story book in my angular 7 workspace with [email protected], all the pre-installed addons such as actions and links were working fine without an errors. The moment I installed Knobs addon it started throwing errors.

To Reproduce

Steps to reproduce the behavior:

Create an Angular 7 workspace using npm.
Install latest storybook through npm.
Run the storybook, no errors observed and the storybook server starts successfully.
Stop the storybook and install latest knobs addon using npm.
Run the storybook again, error starts pouring.

Expected behavior

As the latest storybook does not have a dependency on typescript version, the knob addon should also not have any dependency on the Typescript version. Addon should always align to all the storybook supported versions and not define its explicit dependencies. Because of this issue, even though storybook.js is fully compatible with Angular 7 workspace, because of the Knobs addon explicit dependency on TS, the latest version of storybook.js cannot be used. I even tried adding all other latest addons of story book, all the addons worked fine in Angular 7 workspace except Knob addons.

Constrain*

I cannot upgrade my workspace to 8 as there are a lot of dependent components that I have to rework for the upgrade.

Error Details

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Array.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Array.d.ts(3,53):
TS2304: Cannot find name 'readonly'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Options.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Options.d.ts(4,134):
TS2304: Cannot find name 'readonly'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Select.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/components/types/Select.d.ts(4,197):
TS2304: Cannot find name 'readonly'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts(3,44):
TS2304: Cannot find name 'readonly'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts(3,67):
TS2304: Cannot find name 'U'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts(3,73):
TS2304: Cannot find name 'T'.

ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts
ERROR in node_modules/@storybook/addon-knobs/ts3.5/dist/type-defs.d.ts(3,75):
TS2304: Cannot find name 'P'.

knobs angular

Source

akhilesh85

All 7 comments

FYI, we’ve released addon-controls in 6.0-beta. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

Please upgrade and try them out today!

shilman on 4 Jul 2020

FYI, we’ve released addon-controls in 6.0-beta. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

Controls README

Migration instructions

Walkthrough: Controls w/ CRA & TypeScript

Please upgrade and try them out today!

Hi Shilman,

I tried the control addon and did not find Issues while integrating it. However, I am unable to use the addon as it is throwing error. Do you have any reference guide for how to use control for angular? I found the storybook doc very hard to follow for Angular as most of the examples are for React. Is there a better approach I could take to follow the doc? As today I spent around 8 hours :(

Following are my configuration files:

Storybook Versions:

"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/angular": "^5.3.19",
"@storybook/addon-controls": "^6.0.0-beta.43",
"@storybook/addon-docs": "^6.0.0-beta.43",
"@degjs/storybook-addon-taffy": "^1.0.4",

main.js

module.exports = {
stories: [
'../src//.stories.ts',
'../src//.stories.@(js|ts|tsx|mdx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-notes',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true
},
},
'@storybook/addon-controls',
'@storybook/addon-actions'
],
};

preview.js

import { addParameters } from '@storybook/angular';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

import docJson from '../documentation.json';

//https://github.com/storybookjs/storybook/tree/next/addons/docs/angular

setCompodocJson(docJson);

addParameters({ docs: { iframeHeight: 600 } });

addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
});

addParameters({
actions: { argTypesRegex: "^on.*" },
});

export const parameters = {
actions: { argTypesRegex: "^on.*" },
};

0-Welcome.stories.tsx

export default {
title: 'Welcome',
component: Welcome,
};

export const ToStorybook = (args) => ({
component: Welcome,
props: {
...args
},
});

ToStorybook.story = {
name: 'to Storybook',
};

1-Button.stories.mdx

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { moduleMetadata } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';

moduleMetadata({
declarations: [Button]
})
]} />

Basic Checkbox

{{
template: <div class="some-wrapper-with-padding"> <storybook-button-component [text]="text"></storybook-button-component> </div>,
props: {
text: "Hello"
}
}}

Error: (Complete Console.log)

vendors~main.6a694b58746d7f5188c6.bundle.js:166772 Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using https://fb.me/react-warning-keys for more information.
in AddonPanel
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in ManagerConsumer (created by _default)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout)
in Unknown
in Unknown
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by SizeMeRenderer(Component))
in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
in SizeMeRenderer(Component) (created by SizeMe(Component))
in SizeMe(Component) (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root

printWarning @ vendors~main.6a694b58746d7f5188c6.bundle.js:166772

vendors~main.6a694b58746d7f5188c6.bundle.js:6206 Uncaught TypeError: (0 , _api.useArgs) is not a function
at ControlsPanel (vendors~main.6a694b58746d7f5188c6.bundle.js:6206)
at renderWithHooks (vendors~main.6a694b58746d7f5188c6.bundle.js:137275)
at mountIndeterminateComponent (vendors~main.6a694b58746d7f5188c6.bundle.js:139954)
at beginWork (vendors~main.6a694b58746d7f5188c6.bundle.js:141068)
at HTMLUnknownElement.callCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122660)
at Object.invokeGuardedCallbackDev (vendors~main.6a694b58746d7f5188c6.bundle.js:122709)
at invokeGuardedCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122764)
at beginWork$1 (vendors~main.6a694b58746d7f5188c6.bundle.js:145675)
at performUnitOfWork (vendors~main.6a694b58746d7f5188c6.bundle.js:144629)
at workLoopSync (vendors~main.6a694b58746d7f5188c6.bundle.js:144602)

vendors~main.6a694b58746d7f5188c6.bundle.js:141999 The above error occurred in the component:
in ControlsPanel
in div (created by AddonPanel)
in AddonPanel
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in ManagerConsumer (created by _default)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout)
in Unknown
in Unknown
in div (created by Context.Consumer)
inStyled(div)
in Unknown
in Unknown (created by SizeMeRenderer(Component))
in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
in SizeMeRenderer(Component) (created by SizeMe(Component))
in SizeMe(Component) (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

logCapturedError @ vendors~main.6a694b58746d7f5188c6.bundle.js:141999

vendors~main.6a694b58746d7f5188c6.bundle.js:3870 Uncaught TypeError: (0 , _api.useArgs) is not a function
at ControlsPanel (vendors~main.6a694b58746d7f5188c6.bundle.js:6206)
at renderWithHooks (vendors~main.6a694b58746d7f5188c6.bundle.js:137275)
at mountIndeterminateComponent (vendors~main.6a694b58746d7f5188c6.bundle.js:139954)
at beginWork (vendors~main.6a694b58746d7f5188c6.bundle.js:141068)
at HTMLUnknownElement.callCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122660)
at Object.invokeGuardedCallbackDev (vendors~main.6a694b58746d7f5188c6.bundle.js:122709)
at invokeGuardedCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122764)
atbeginWork$1 (vendors~main.6a694b58746d7f5188c6.bundle.js:145675)
at performUnitOfWork (vendors~main.6a694b58746d7f5188c6.bundle.js:144629)
at workLoopSync (vendors~main.6a694b58746d7f5188c6.bundle.js:144602)

vendors~main.6a694b58746d7f5188c6.bundle.js:141999 The above error occurred in the component:
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

logCapturedError @ vendors~main.6a694b58746d7f5188c6.bundle.js:141999
vendors~main.6a694b58746d7f5188c6.bundle.js:133574 Uncaught TypeError: (0 , _api.useArgs) is not a function
at ControlsPanel (vendors~main.6a694b58746d7f5188c6.bundle.js:6206)
at renderWithHooks (vendors~main.6a694b58746d7f5188c6.bundle.js:137275)
at mountIndeterminateComponent (vendors~main.6a694b58746d7f5188c6.bundle.js:139954)
at beginWork (vendors~main.6a694b58746d7f5188c6.bundle.js:141068)
at HTMLUnknownElement.callCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122660)
at Object.invokeGuardedCallbackDev (vendors~main.6a694b58746d7f5188c6.bundle.js:122709)
at invokeGuardedCallback (vendors~main.6a694b58746d7f5188c6.bundle.js:122764)
at beginWork$1 (vendors~main.6a694b58746d7f5188c6.bundle.js:145675)
at performUnitOfWork (vendors~main.6a694b58746d7f5188c6.bundle.js:144629)
at workLoopSync (vendors~main.6a694b58746d7f5188c6.bundle.js:144602)

akhilesh85 on 6 Jul 2020

@akhilesh85 Try

npx sb@next upgrade —prerelease

shilman on 6 Jul 2020

@akhilesh85 Try

npx sb@next upgrade —prerelease

Hi Shilman,

Thanks. I managed to upgrade to beta-44. When I upgraded it gave some errors. I have some .scss files in my workspace hence I had to install sass-loader css-loader and style-loader of webpack as part of preset-scss storybook presets.

On running the storybook, I got the below error:

[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss 136 bytes {main} [built]

[src/styles/app.scss] src/styles/app.scss 2.31 KiB {main} [built]
[./.storybook/generated-stories-entry.js] 179 bytes {main} [built]
[./.storybook/preview.js] 749 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 2.92 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 28 bytes {main} [built]
[./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!src/styles/app.scss] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--9-3!src/styles/app.scss 691 bytes {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js] 2.41 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js] 216 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.34 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] 7.68 KiB {vendors~main} [built]
+ 1805 hidden modules

ERROR in src/styles/app.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--9-3!src/styles/app.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
at validate (node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (node_modules/sass-loader/dist/index.js:30:28)
@ src/styles/app.scss 2:26-343 43:4-64:5 46:18-335
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 5:0-42
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 7:0-44
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.define-properties' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 9:0-54
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.define-property' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 11:0-52
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.get-own-property-descriptor' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 13:0-64
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.get-own-property-descriptors' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 15:0-65
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.keys' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 17:0-41
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 3:0-36
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.for-each' in '.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 19:0-55
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined src/styles/app.scss
Child HtmlWebpackCompiler:

Options in the validate.js (Validate Function) of Sass Loader. I outputed some logs from the function

2% building 21/26 modules 5 active node_modules/@storybook/client-logger/dist/index.jsschema => {

type: 'object',
properties: {
implementation: {
description: 'The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).',
type: 'object'
},
sassOptions: {
description: 'Options for node-sass or sass (Dart Sass) implementation. (https://github.com/webpack-contrib/sass-loader#implementation).',
anyOf: [Array]
},
additionalData: {
description: 'Prepends/Appends Sass/SCSS code before the actual entry file (https://github.com/webpack-contrib/sass-loader#additionaldata).',
anyOf: [Array]
},
sourceMap: {
description: 'Enables/Disables generation of source maps (https://github.com/webpack-contrib/sass-loader#sourcemap).',
type: 'boolean'
},
webpackImporter: {
description: 'Enables/Disables default webpack importer (https://github.com/webpack-contrib/sass-loader#webpackimporter).',
type: 'boolean'
}
},
additionalProperties: false
}

Options => {
implementation: undefined,
fiber: undefined,
sourceMap: undefined,
precision: 8,
includePaths: [
'src/styles'

]
}

configuration => { name: 'Sass Loader', baseDataPath: 'options' }

akhilesh85 on 7 Jul 2020

I was able to resolve the above error in my angular 7 workspace.

I had to upgrade core-js from 2.6.11 to 3.6.5 and downgrade sass-loader from 8.0.2 to 7.3.1. In addition to this, I had to add some path entries in my tsconfig.json. https://github.com/zloirock/core-js/issues/573#issuecomment-501254872

akhilesh85 on 7 Jul 2020

👍1

I managed to get this working without using the beta release and without downgrading sass-loader, and only upgrading core-js (3.6.5)

simmbiote on 1 Sep 2020

👍1

I managed to get this working without using the beta release and without downgrading sass-loader, and only upgrading core-js (3.6.5)

Hi, the reason for sass-loader downgrade was that my project was throwing errors with regard to scss declartions, as it was only compatible with the lower version of sass.