Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors #8730

mattfelten · 2019-11-06T01:44:52Z

Describe the bug
Build breaking when upgrading from 5.1.9 to 5.2.5. I've only upgraded @storybook/react and @storybook/addon-knobs to try to isolate the issue. If I leave knobs at 5.1.9, I get different errors, which is probably because of version differences.

Could it be something with tslint? All the errors are typings related.

Code snippets

// Console log

ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts:4:62 
    TS1005: ';' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts:4:69 
    TS1011: An element access expression should take an argument.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts:4:53 
    TS2304: Cannot find name 'readonly'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts:4:62 
    TS2693: 'string' only refers to a type, but is being used as a value here.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:206 
    TS1005: ';' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:197 
    TS2304: Cannot find name 'readonly'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:206 
    TS2693: 'Extract' only refers to a type, but is being used as a value here.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:206 
    TS2695: Left side of comma operator is unused and has no side effects.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:214 
    TS2304: Cannot find name 'T'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Select.d.ts:4:217 
    TS2693: 'PropertyKey' only refers to a type, but is being used as a value here.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts:4:143 
    TS1005: ';' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts:4:134 
    TS2304: Cannot find name 'readonly'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts:4:143 
    TS2693: 'NonNullable' only refers to a type, but is being used as a value here.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts:4:143 
    TS2365: Operator '>' cannot be applied to types 'boolean' and 'undefined[]'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts:4:155 
    TS2304: Cannot find name 'T'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:53 
    TS1005: '?' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:65 
    TS1005: ':' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:71 
    TS1005: ';' expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:4:1 
    TS1128: Declaration or statement expected.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:44 
    TS2304: Cannot find name 'readonly'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:67 
    TS2304: Cannot find name 'U'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:73 
    TS2304: Cannot find name 'T'.
ERROR in [at-loader] ../../node_modules/@storybook/addon-knobs/dist/type-defs.d.ts:3:75 
    TS2304: Cannot find name 'P'.

// webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
	config.module.rules.push(
		{
			test: /\.(ts|tsx)$/,
			use: [
				{
					loader: require.resolve('awesome-typescript-loader')
				}, {
					loader: require.resolve('react-docgen-typescript-loader')
				},
				{
					loader: require.resolve('@storybook/addon-storysource/loader'),
					options: { 
						parser: 'typescript',
						prettierConfig: {
							printWidth: 80,
							singleQuote: false
						}
					}
				}
			],
			enforce: 'pre',
			exclude: /node_modules/
		}
	);
	config.resolve.extensions.push('.ts', '.tsx');
	return config;
};

System:

Environment Info:

  System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.11.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 78.0.3904.87
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-backgrounds: 5.1.9 => 5.1.9 
    @storybook/addon-knobs: 5.2.5 => 5.2.5 
    @storybook/addon-storysource: 5.1.9 => 5.1.9 
    @storybook/react: 5.2.5 => 5.2.5

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

gaetanmaisse · 2019-11-06T17:14:12Z

@mattfelten I'm wondering if it's not a TypeScript version issue which one are you using?

mattfelten · 2019-11-06T19:04:26Z

It could be. We're using a relatively old version of TS. 3.1.6 Are there specific version requirements for Storybook/knobs?

gaetanmaisse · 2019-11-06T19:43:26Z

After investigation, it looks like you have to use TS 3.4+ because knob-addon of Storybook is using readonly array new syntax. For instance here:

storybook/addons/knobs/src/components/types/Options.tsx

Line 23 in 9198f90

> = T | NonNullable<T>[] | readonly NonNullable<T>[];

@shilman @ndelangen is there a place yet where there are version requirements in SB repo?

mattfelten · 2019-11-06T20:22:15Z

Oh interesting. Ok. I can start there then to see if I can update TS for our project.

mattfelten · 2019-11-06T22:39:11Z

Yeah, I'm able to reproduce this. From a brand new fresh setup, downgrading TS to 3.3.4000 does break the build. Bumping up to 3.4.0-rc works again.
https://github.com/mattfelten/storybook-preset-typescript-test

Would be good to have this documented somewhere.

shilman · 2019-11-07T02:23:00Z

@gaetanmaisse can we encode that version requirement in package.json somehow? AND probably on the top of the typescript page: https://storybook.js.org/docs/configurations/typescript-config/

mattfelten · 2019-11-07T02:40:16Z

I'm open to contributing the changes if you have a place that would make sense. Maybe being a peer dependency of @storybook/preset-typescript would make sense? Maybe something with @storybook/addon-knobs too, but then again knobs can be used without Typescript.

shilman · 2019-11-07T03:03:25Z

thanks @mattfelten! that works for me

elcordova · 2019-11-21T15:07:43Z

i have same problem here, I use @storybook/addon-knobs v5.2.6 with angular7 😢

emilio-martinez · 2019-11-21T19:00:24Z

@elcordova Angular v7 uses a lower version of Typescript compared to what Storybook requires (v3.4). Angular officially noted support for TS 3.4 and dropped older versions as of 8.0.0 back in May (see Angular Changelog), so you'll need to upgrade to Angular v8 for that.

markdrobin · 2019-11-26T04:00:19Z

If it helps anybody, I had the same issue and currently we are using Typescript 3.3 and React in our project. So I just used and imported @storybook/addon-knobs/react instead so we don't have to upgrade our Typescript to 3.4(since we all know that it's going to be messy), and it works.

stale · 2019-12-17T04:08:39Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale · 2020-01-16T04:30:09Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

shilman added addon: knobs help wanted question / support typescript labels Nov 6, 2019

mattfelten mentioned this issue Nov 6, 2019

Starting over to fix migration, can't get preset-typescript to work storybookjs/presets#51

Closed

This was referenced Nov 8, 2019

Update docs to mention TypeScript version recommendation #8755

Merged

Update TS version for knobs compatibility storybookjs/presets#52

Merged

stale bot added the inactive label Dec 17, 2019

stale bot closed this as completed Jan 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors #8730

Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors #8730

mattfelten commented Nov 6, 2019 •

edited

Loading

gaetanmaisse commented Nov 6, 2019

mattfelten commented Nov 6, 2019

gaetanmaisse commented Nov 6, 2019

mattfelten commented Nov 6, 2019

mattfelten commented Nov 6, 2019

shilman commented Nov 7, 2019 •

edited

Loading

mattfelten commented Nov 7, 2019

shilman commented Nov 7, 2019

elcordova commented Nov 21, 2019

emilio-martinez commented Nov 21, 2019

markdrobin commented Nov 26, 2019

stale bot commented Dec 17, 2019

stale bot commented Jan 16, 2020

Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors #8730

Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors #8730

Comments

mattfelten commented Nov 6, 2019 • edited Loading

gaetanmaisse commented Nov 6, 2019

mattfelten commented Nov 6, 2019

gaetanmaisse commented Nov 6, 2019

mattfelten commented Nov 6, 2019

mattfelten commented Nov 6, 2019

shilman commented Nov 7, 2019 • edited Loading

mattfelten commented Nov 7, 2019

shilman commented Nov 7, 2019

elcordova commented Nov 21, 2019

emilio-martinez commented Nov 21, 2019

markdrobin commented Nov 26, 2019

stale bot commented Dec 17, 2019

stale bot commented Jan 16, 2020

mattfelten commented Nov 6, 2019 •

edited

Loading

shilman commented Nov 7, 2019 •

edited

Loading