[Bug]: ColorControl component (@storybook/components) not working in Storybook 7 pre-release

[Danielvandervelden]

Describe the bug

We've tried upgrading the our Storybook version from 6.5.16 to 7 using the npx storybook@next upgrade --prerelease command. We have a custom written addon that uses the ColorControl component to display a colorpicker as follows:

After upgrading to Storybook 7, however, I get the error that this ColorControl component isn't exported from @storybook/components. Exact error message:

'No matching export in "global-externals:@storybook/components" for import "ColorControl"'

To Reproduce

https://github.com/Danielvandervelden/storybook-issue

(Obviously can't deploy on Chromatic because of this issue)

System

For the addon:

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 108.0.2
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/react: ^7.0.0-beta.36 => 7.0.0-beta.36

For our Storybook environment:

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 108.0.2
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/addon-docs: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/addon-essentials: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/addon-links: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/addons: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    @storybook/react: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/react-webpack5: ^7.0.0-beta.36 => 7.0.0-beta.36 
    @storybook/theming: ^7.0.0-beta.36 => 7.0.0-beta.36

Additional context

Repo with issue (simply checkout, yarn install and yarn storybook to see the error)
https://github.com/Danielvandervelden/storybook-issue

No response

[yannbf]

Hey @Danielvandervelden! Thanks for reporting this.

In Storybook 7.0, components like ColorControl, ColorPalette, ArgsTable, ArgRow, TabbedArgsTable, SectionRow, Source, Code were moved into a new package. In Storybook 7.0, they should be imported from @storybook/blocks instead. Please give it a try!

[Danielvandervelden]

Hi @yannbf,

This works! Weird how Typescript couldn't autocomplete it from @storybook/blocks in that case. Still sees the export in @storybook/components 🤔 .

Thanks!