Storybook: Upgrading Storybook and addon-knobs from 5.1.9 to 5.2.5 errors

[mattfelten]

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 

[gaetanmaisse]

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

[mattfelten]

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

[gaetanmaisse]

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: https://github.com/storybookjs/storybook/blob/9198f905d1fe60a301bb3720751466b840b8b116/addons/knobs/src/components/types/Options.tsx#L23

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

[mattfelten]

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

[mattfelten]

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]

@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]

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]

thanks @mattfelten! that works for me

[elcordova]

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

[emilio-martinez]

@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.

[mdrobin95]

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[bot]]

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[bot]]

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!