[Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html #21820

jattasNI · 2023-03-29T20:37:43Z

Describe the bug

In Storybook 7.0.0-rc.8 I see a TypeScript compile error when I try to build a project that imports types from @storybook/html:

../../node_modules/@storybook/html/dist/types-2ec88714.d.ts:3:33 - error TS2307: Cannot find module 'lib/types/dist' or its corresponding type declarations.

import * as lib_types_dist from 'lib/types/dist';

(There is a similar issue with import * as lib_docs_tools_dist from 'lib/docs-tools/dist';)

If I look in node_modules I don't see any directory for lib or any entry points named lib in package.json. Are these standard ES module imports? Is a certain bundler configuration required for this import to be found? If I locally modify node_modules/@storybook/html/dist/types-2ec88714.d.ts as described below, the build succeeds.

import * as lib_types_dist from 'lib/docs-tools/dist'; change to
import * as lib_types_dist from '@storybook/docs-tools';

To Reproduce

Currently failing the build in this branch of the ni/nimble repository. To build, clone that branch then run npm i and npm run build. The build for /packages/nimble-components will fail with this error.

If a smaller reproduction case would be helpful I can try to create one.

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.110
    Firefox: 111.0.1
    Safari: 16.3

Additional context

A workaround is to change tsconfig.json to include "skipLibCheck": true, which tells the TypeScript compiler not to run type checking on code in node_modules. But that impacts compile for all dependencies so we'd prefer not to have to do this.

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

# Pull Request ## 🤨 Rationale We want to be on the latest storybook version because it fixes issues we've had with dependencies and it enables more powerful docs pages via mdx and Component Story Format enhancements. Notable changes: - landing page uses correct fonts and errors in console are gone (fixing #825 and #943 properly) - [no more Docs tab](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-docs-changes). Each story group has a docs page under it instead. - XD previews are gone (feature was deprecated) - Actions not working yet and some code previews have stopped working; see "Follow ups" below ## 👩‍💻 Implementation Following the [upgrade guide](https://storybook.js.org/docs/react/configure/upgrading#prereleases) didn't work very well because it is buggy with a monorepo. Fred's general strategy was to run the upgrade command from within `nimble-components` then delete the `node_modules` and `package-lock.json` that it creates there, then re-install everything from the root. The migration tool is responsible for the changes to: 1. storybook configuration files 2. package.json 3. renaming types like `Story` -> `StoryFn` and `storyName` to `name` 4. deleting the `withXD` decorator which is no longer supported Beyond that there were a few other manual changes: 1. establish static dependencies on components needed by each story. Storybook seems to have gotten more aggressive about compiling away unneeded components so if something isn't imported, it won't be found and components won't render correctly. This meant: 1. replacing a few literals for element tag names in stories with the `elementTag` export 2. updating the `nimble-menu` to explicitly depend on `nimble-anchored-region` (see comment on `menu/index.ts`) 2. Enable 'autodocs' for component and token stories but disable it for test stories 3. Add a patch file to work around storybookjs/storybook#21820 4. simplified return types of story generation functions in `storybook.ts` in response to storybook type changes 5. regenerated landing page screenshot and annotation now that docs tab is gone ## 🔜 Follow ups in future PRs Fixing these issues is tracked by #1146 . I tried upgrading to ts 4.7 but it didn't fix any of them. - [ ] storybookjs/storybook#21820 - [ ] Figure out why actions aren't firing when you click a button. Likely [need this decorator](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-auto-injection-of-storybookaddon-actions-decorator) but it's not present in current rc: storybookjs/storybook#21308 - [ ] Some code previews (table, tooltip) are not available in the Docs page ## 🧪 Testing Chromatic caught several diffs which resulted in the manual changes described above 👍. ~~It's still showing new stories for the wafer map and button. (The wafer map one is caused by Chromatic getting confused when I tried renaming that story, ran a Chromatic build, and then reverted that change. I don't know the cause of the button change.)~~ <- this went away on a subsequent build Also manually spot checked many of the stories across browsers, especially ones that have workarounds in them like table and theme-aware tokens. ## ✅ Checklist  - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Fred Visser <1458528+fredvisser@users.noreply.github.com>

shannonmoeller · 2023-04-10T19:12:09Z

Still seeing this issue with v7.0.2.

jattasNI · 2023-04-12T21:37:46Z

I've starting seeing an additional related error in 7.0.4:

../../node_modules/@storybook/addon-actions/dist/decorator.d.ts:1:71 - error TS2307: Cannot find module 'lib/preview-api/dist/storybook-channel-mock-a19cd233' or its corresponding type declarations.

1 import * as lib_preview_api_dist_storybook_channel_mock_a19cd233 from 'lib/preview-api/dist/storybook-channel-mock-a19cd233';

The workaround we've adopted is to use patch-package to run during npm postinstall and replace lib with @storybook in the broken files in node_modules. It's a bit annoying to maintain since the files in node_modules seem to change names between releases, but at least it allows us to keep skipLibCheck: false so we don't have to turn off type checking for all of our other dependencies.

# Pull Request ## 🤨 Rationale Right after I submitted the upgrade to a release candidate of Storybook 7 in #1134, I noticed they [released the official 7.0.0](https://github.com/storybookjs/storybook/releases). Adopting the latest patch addresses some of the issues in #1146. ## 👩‍💻 Implementation 1. Update to latest non-RC build in package.json and regenerate package-lock.json 2. Regenerate one patch file since the file it was patching has a new name 3. Add another patch file since they introduced another instance of storybookjs/storybook#21820 4. Move off deprecated API for specifying `sourceTransform` as described in [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block) 5. Delete `storybook-declarations.ts` since this bug was closed storybookjs/storybook#21887 ## 🧪 Testing Explored Storybook. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

stof · 2023-04-15T03:25:19Z

@ndelangen do you have any idea where this broken type declaration comes from ? The source code in the repo does not use lib/types

shilman · 2023-04-24T02:02:58Z

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.8 containing PR #22175 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

shilman · 2023-04-24T10:14:27Z

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.7 containing PR #22175 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

shannonmoeller · 2023-04-24T15:08:37Z

Thank you!

jattasNI · 2023-04-24T16:23:30Z

@ndelangen I tried upgrading to 7.0.7 and I still see these same two errors. And on unpkg you can see that the lib/types paths are still present. Is it possible that your fix either didn't make it into this release or isn't behaving as expected?

../../node_modules/@storybook/html/dist/types-ccac9448.d.ts:2:38 - error TS2307: Cannot find module 'lib/docs-tools/dist' or its corresponding type declarations.

2 import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
                                       ~~~~~~~~~~~~~~~~~~~~~

../../node_modules/@storybook/html/dist/types-ccac9448.d.ts:3:33 - error TS2307: Cannot find module 'lib/types/dist' or its corresponding type declarations.

3 import * as lib_types_dist from 'lib/types/dist';

I also started seeing new errors when trying to use the withActions decorator in my metadata:

src/banner/tests/banner.stories.ts:46:18 - error TS2322: Type 'Addon_DecoratorFunction<unknown>' is not assignable to type 'DecoratorFunction<HtmlRenderer, { open: boolean; title: string; text: string; severity: BannerSeverity; action: ActionType; preventDismiss: boolean; titleHidden: boolean; dismissButtonLabel: string; toggle: unknown; }>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'StoryContext<HtmlRenderer, { open: boolean; title: string; text: string; severity: BannerSeverity; action: ActionType; preventDismiss: boolean; titleHidden: boolean; dismissButtonLabel: string; toggle: unknown; }>' is not assignable to type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>'.
      Type 'StoryContext<HtmlRenderer, { open: boolean; title: string; text: string; severity: BannerSeverity; action: ActionType; preventDismiss: boolean; titleHidden: boolean; dismissButtonLabel: string; toggle: unknown; }>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<Addon_ReturnTypeFramework<unknown>, Args>; }'.
        Types of property 'originalStoryFn' are incompatible.
          Type 'StoryFn<HtmlRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
            Type 'ArgsStoryFn<HtmlRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
              Type 'ArgsStoryFn<HtmlRenderer, Args>' is not assignable to type 'ArgsStoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                Types of parameters 'context' and 'context' are incompatible.
                  Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryContext<HtmlRenderer, Args>'.
                    Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<HtmlRenderer, Args>; }'.
                      Types of property 'originalStoryFn' are incompatible.
                        Type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<HtmlRenderer, Args>'.
                          Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<HtmlRenderer, Args>'.
                            Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'LegacyStoryFn<HtmlRenderer, Args>'.
                              Types of parameters 'context' and 'context' are incompatible.
                                Type 'StoryContext<HtmlRenderer, Args>' is not assignable to type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>'.
                                  Type 'StoryContext<HtmlRenderer, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<Addon_ReturnTypeFramework<unknown>, Args>; }'.
                                    Types of property 'originalStoryFn' are incompatible.
                                      Type 'StoryFn<HtmlRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                                        Type 'ArgsStoryFn<HtmlRenderer, Args>' is not assignable to type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                                          Type 'ArgsStoryFn<HtmlRenderer, Args>' is not assignable to type 'ArgsStoryFn<Addon_ReturnTypeFramework<unknown>, Args>'.
                                            Types of parameters 'context' and 'context' are incompatible.
                                              Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryContext<HtmlRenderer, Args>'.
                                                Type 'StoryContext<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode$1; originalStoryFn: StoryFn<HtmlRenderer, Args>; }'.
                                                  Types of property 'originalStoryFn' are incompatible.
                                                    Type 'StoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<HtmlRenderer, Args>'.
                                                      Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'StoryFn<HtmlRenderer, Args>'.
                                                        Type 'LegacyStoryFn<Addon_ReturnTypeFramework<unknown>, Args>' is not assignable to type 'LegacyStoryFn<HtmlRenderer, Args>'.
                                                          Type 'unknown' is not assignable to type 'StoryFnHtmlReturnType'.

46     decorators: [withActions],
                    ~~~~~~~~~~~

ndelangen · 2023-04-26T13:11:02Z

@jattasNI thank you for reporting back and showing what's wrong! I have investigated and concluded there is indeed a bug somewhere in the tooling generating the definitions file.

I think I found a way around the issue.

shilman · 2023-05-02T16:42:23Z

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.12 containing PR #22261 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

shilman · 2023-05-03T10:06:47Z

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.8 containing PR #22261 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

jattasNI added bug needs triage labels Mar 29, 2023

jattasNI mentioned this issue Mar 29, 2023

Storybook 7 upgrade ni/nimble#1134

Merged

4 tasks

shilman added typescript and removed needs triage labels Mar 30, 2023

jattasNI mentioned this issue Mar 31, 2023

Update storybook when SB7 regressions are fixed ni/nimble#1146

Closed

5 tasks

jattasNI mentioned this issue Apr 12, 2023

Move to official Storybook 7 release ni/nimble#1147

Merged

1 task

ndelangen self-assigned this Apr 20, 2023

ndelangen mentioned this issue Apr 20, 2023

Bug: simplify the export type of addon actions decorator so it doesn't get generated incorrectly #22175

Merged

ndelangen closed this as completed in #22175 Apr 20, 2023

ndelangen reopened this Apr 26, 2023

ndelangen mentioned this issue Apr 26, 2023

fix bad typings file caused by https://github.com/egoist/tsup/issues/782 #22261

Merged

5 tasks

ndelangen closed this as completed in #22261 May 1, 2023

m-akinc mentioned this issue Feb 9, 2024

[Bug]: 7.6.4 - Module '"@storybook/addon-actions/decorator" "Type 'unknown' cannot be assigned to type 'StoryFnHtmlReturnType'" #25170

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html #21820

[Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html #21820

jattasNI commented Mar 29, 2023 •

edited

shannonmoeller commented Apr 10, 2023

jattasNI commented Apr 12, 2023

stof commented Apr 15, 2023

shilman commented Apr 24, 2023

shilman commented Apr 24, 2023

shannonmoeller commented Apr 24, 2023

jattasNI commented Apr 24, 2023

ndelangen commented Apr 26, 2023

shilman commented May 2, 2023

shilman commented May 3, 2023

[Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html #21820

[Bug]: 7.0.0-rc.8 Cannot find module 'lib/types/dist' in @storybook/html #21820

Comments

jattasNI commented Mar 29, 2023 • edited

Describe the bug

To Reproduce

System

Additional context

shannonmoeller commented Apr 10, 2023

jattasNI commented Apr 12, 2023

stof commented Apr 15, 2023

shilman commented Apr 24, 2023

shilman commented Apr 24, 2023

shannonmoeller commented Apr 24, 2023

jattasNI commented Apr 24, 2023

ndelangen commented Apr 26, 2023

shilman commented May 2, 2023

shilman commented May 3, 2023

jattasNI commented Mar 29, 2023 •

edited