[Bug]: @storybook/theming/create export no longer exists with 8.2.2

[jpzwarte]

Describe the bug

I'm upgrading our Storybook from 8.1 to 8.2.2 and ran into the error below:

1:17:48 PM [vite] Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/sl-theme.ts". Does the file exist?

Code in question: import { create } from '@storybook/theming/create';

Afaict this code should still be valid (https://storybook.js.org/docs/configure/user-interface/theming#create-a-theme-quickstart)

If i inspect the theming package in my node_modules folder, i don't see anything anymore that relates to create.

Reproduction link

Reproduction steps

No response

System

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - /opt/homebrew/bin/node
    Yarn: 4.3.1 - /opt/homebrew/bin/yarn <----- active
    npm: 10.7.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: ^8.2.2 => 8.2.2 
    @storybook/addon-essentials: ^8.2.2 => 8.2.2 
    @storybook/addon-storysource: ^8.2.2 => 8.2.2 
    @storybook/core-events: ^8.2.2 => 8.2.2 
    @storybook/manager-api: ^8.2.2 => 8.2.2 
    @storybook/preview-api: ^8.2.2 => 8.2.2 
    @storybook/test: ^8.2.2 => 8.2.2 
    @storybook/theming: ^8.2.2 => 8.2.2 
    @storybook/web-components-vite: ^8.2.2 => 8.2.2 
    chromatic: ^11.5.5 => 11.5.5 
    storybook: ^8.2.2 => 8.2.2

Additional context

No response

[jpzwarte]

If the comment above is correct, please update MIGRATION.md according. Would have saved me a bit of time :(

[ndelangen]

The bot's statement is false. I'll investigate.

[abusada]

For me the error happens only when using storybook-mock-date-decorator,

[ndelangen]

Yeah, I think it's because the exports map in package.json isn't respected...

The only idea I have to resolve this by adding "type"="module" to each of the shim packages.

[ndelangen]

Does anyone have a repro for me to experiment/try my theory on?

[jpzwarte]

Does anyone have a repro for me to experiment/try my theory on?

https://github.com/sl-design-system/components/tree/maintenance/upgrade-deps should be ready to go.

Run yarn start --watch to start Storybook.

[ndelangen]

OK, I chatted with @jpzwarte and the resolution for them was to add the @storybook/theming package to their package.json.

There's nothing wrong with the package, it was just missing.

@abusada can you verify this resolution works for you?

[shilman]

FYI, we are looking into writing an automigration to look for these packages that are referenced in code but not available in package.json and add those dev dependencies automatically. Hopefully this will save a lot of pain for all the users who have yet to upgrade to 8.2.

[MWhite-22]

I think there's something slightly different going on with PNPM workspaces as well.

Getting the same create not exported error, but I have @storybook/theming installed in this package.

[ndelangen]

@MWhite-22 could you share a repro of this?

[ixahmedxi]

I'm also getting a similar error when updating the storybook packages in orbitkit.

Commit that introduced the error: ixahmedxi/orbitkit@c5bf39e#diff-22c2ff92a920c01d84e66e1a39f97a1b913c391396737e2c81b2eca568e8ee68

The error being outputted from tsc:
https://github.com/ixahmedxi/orbitkit/actions/runs/9915437213/job/27396278509

[ndelangen]

I see.. the issue you seem to get is this:

@orbitkit/storybook:build
cache miss, executing 63e832f9b940368b
$ tsc -p tsconfig.build.json
src/preview.tsx:49:7 - error TS4023: Exported variable 'preview' has or is using name 'ThemeVars' from external module "/home/runner/work/orbitkit/orbitkit/node_modules/@storybook/core/dist/theming/create" but cannot be named.

49 const preview = {
         ~~~~~~~

src/theme.ts:4:1 - error TS4082: Default export of the module has or is using private name 'ThemeVars'.

  4 export default create({
    ~~~~~~~~~~~~~~~~~~~~~~~
  5   base: 'dark',
    ~~~~~~~~~~~~~~~
... 
 27   textInverseColor: grayDark.gray1,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 28 })

@ixahmedxi?

Is this a problem with our types?

I've seen the "but cannot be named" problem often too, and always end up here:
https://stackoverflow.com/questions/43900035/ts4023-exported-variable-x-has-or-is-using-name-y-from-external-module-but

We do export the ThemeVars type here:

storybook/code/core/src/theming/types.ts

Line 5 in 4ba799f

export interface ThemeVars extends ThemeVarsBase, ThemeVarsColors {}

re-exported here:

storybook/code/core/src/theming/index.ts

Line 32 in c647260

export * from './types';

So I'm not sure there's anything on the storybook side we could do, but I'm very open to suggests and would love to fix this so no changes are required on your part.

[johannesgoslar-synth]

I think there's something slightly different going on with PNPM workspaces as well.

Getting the same create not exported error, but I have @storybook/theming installed in this package.

We also have an issue in a pnpm workspace when upgrading to 8.2:
Cannot find module 'storybook/internal/preview-api' from '../../node_modules/@storybook/react/dist/index.js'

[ixahmedxi]

I see.. the issue you seem to get is this:

@orbitkit/storybook:build
cache miss, executing 63e832f9b940368b
$ tsc -p tsconfig.build.json
src/preview.tsx:49:7 - error TS4023: Exported variable 'preview' has or is using name 'ThemeVars' from external module "/home/runner/work/orbitkit/orbitkit/node_modules/@storybook/core/dist/theming/create" but cannot be named.

49 const preview = {
         ~~~~~~~

src/theme.ts:4:1 - error TS4082: Default export of the module has or is using private name 'ThemeVars'.

  4 export default create({
    ~~~~~~~~~~~~~~~~~~~~~~~
  5   base: 'dark',
    ~~~~~~~~~~~~~~~
... 
 27   textInverseColor: grayDark.gray1,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 28 })

@ixahmedxi?

Is this a problem with our types?

I've seen the "but cannot be named" problem often too, and always end up here: https://stackoverflow.com/questions/43900035/ts4023-exported-variable-x-has-or-is-using-name-y-from-external-module-but

We do export the ThemeVars type here:

storybook/code/core/src/theming/types.ts

Line 5 in 4ba799f

export interface ThemeVars extends ThemeVarsBase, ThemeVarsColors {}

re-exported here:

storybook/code/core/src/theming/index.ts

Line 32 in c647260

export * from './types';

So I'm not sure there's anything on the storybook side we could do, but I'm very open to suggests and would love to fix this so no changes are required on your part.

I can't seem to be able to import ThemeVars from @storybook/theming/create but I can from @storybook/core/theming or @storybook/theming.

The error actually goes away when I import the create function from @storybook/core/theming or @storybook/theming instead of @storybook/theming/create.

[ndelangen]

@ixahmedxi Ah, that has given me a bit of a new insight.

I could export those types from the create file as well.

[mririgoyen]

Also seeing this issue, even with @storybook/theming in our package.json. Is there a workaround or do I need to go to a previous version until a fix is in place?

[ndelangen]

This should be fixed in 8.2.4

[kasperpeulen]

I can't seem to be able to import ThemeVars from @storybook/theming/create but I can from @storybook/core/theming or @storybook/theming.

@ixahmedxi I can not reproduce that we exported ThemeVars in @storybook/theming/create in 8.1 or even in 7.6.

[dklemmt]

Also seeing this issue, even with @storybook/theming in our package.json. Is there a workaround or do I need to go to a previous version until a fix is in place?

Same for me. Using version 8.2.4 doesn't fix the issue unfortunately.

[valentinpalkovic]

@dklemmt Are you able to provide a reproduction?

[yannbf]

Everyone who hits this issue, could you please run npx storybook@latest doctor and in case it reports an issue, tell us what you got? Thanks!

[kasperpeulen]

@ndelangen Seems to be fixed by this one:
#28643

Could you review @ndelangen ?

[dklemmt]

@dklemmt Are you able to provide a reproduction?

Hi @valentinpalkovic, please take a look here: https://github.com/dklemmt/fluidus-ui

You can run Storybook from root using npm start. The files itself are located in packages/react/.storybook.

Thank you very much for looking into.

[vanessayuenn]

Hey all, a fix has been released in 8.3.0-alpha.2. Can you see if your issues are resolved? We will also patch this back to 8.2.5 shortly.

[dklemmt]

Hey all, a fix has been released in 8.3.0-alpha.2. Can you see if your issues are resolved? We will also patch this back to 8.2.5 shortly.

Hi @vanessayuenn, I checked and the issue has been fixed (at least for me). Thank you very much.