No matching export in "global-externals:@storybook/components"

[qieman]

Describe the bug

When I execute the command 'yarn storybook' after completing the Storybook installation, it throws the following error：

yarn run v1.22.19
$ storybook dev -p 6006
@storybook/cli v7.5.3

info => Starting manager..
X [ERROR] No matching export in "global-externals:@storybook/components" for import "ArgsTable"

    node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js:31:9:
      31 │ import { ArgsTable, NoControlsWarning } from '@storybook/components';
         ╵          ~~~~~~~~~

X [ERROR] No matching export in "global-externals:@storybook/components" for import "NoControlsWarning"

    node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js:31:20:
      31 │ import { ArgsTable, NoControlsWarning } from '@storybook/components';
         ╵                     ~~~~~~~~~~~~~~~~~

X [ERROR] No matching export in "global-externals:@storybook/addons" for import "useEffect"

    node_modules/@storybook/addon-actions/dist/esm/preview/withActions.js:45:9:
      45 │ import { useEffect, makeDecorator } from '@storybook/addons';
         ╵          ~~~~~~~~~

X [ERROR] No matching export in "global-externals:@storybook/addons" for import "makeDecorator"

    node_modules/@storybook/addon-actions/dist/esm/preview/withActions.js:45:20:
      45 │ import { useEffect, makeDecorator } from '@storybook/addons';
         ╵                     ~~~~~~~~~~~~~

Error: Build failed with 4 errors:
node_modules/@storybook/addon-actions/dist/esm/preview/withActions.js:45:9: ERROR: No matching export in "global-externals:@storybook/addons" for import "useEffect"     
node_modules/@storybook/addon-actions/dist/esm/preview/withActions.js:45:20: ERROR: No matching export in "global-externals:@storybook/addons" for import "makeDecorator"
node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js:31:9: ERROR: No matching export in "global-externals:@storybook/components" for import "ArgsTable"      
node_modules/@storybook/addon-controls/dist/esm/ControlsPanel.js:31:20: ERROR: No matching export in "global-externals:@storybook/components" for import "NoControlsWarning"
    at failureErrorWithLog (.\node_modules\esbuild\lib\main.js:1649:15)
    at .\node_modules\esbuild\lib\main.js:1058:25
    at runOnEndCallbacks (.\node_modules\esbuild\lib\main.js:1484:45)
    at buildResponseToResult (.\node_modules\esbuild\lib\main.js:1056:7)
    at .\node_modules\esbuild\lib\main.js:1085:16
    at responseCallbacks.<computed> (.\node_modules\esbuild\lib\main.js:703:9)
    at handleIncomingPacket (.\node_modules\esbuild\lib\main.js:762:9)
    at Socket.readFromStdout (.\node_modules\esbuild\lib\main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce

No response

System

No response

Additional context

I also referred to this report：#20843. I didn't modify anything related to Storybook. It still throws errors.

[qieman]

Finally, I solved the problem by doing this：Manually installing @storybook/components @storybook/addons , clean yarn cache and remove node_modules , run the 'yarn' script ，run ’ yarn storybook‘.

[SuryaprakashCIT]

Hi @qieman

I am facing the same issue. I tired following your answer, but still facing the error.

[newlukai]

Did not work for me.

What I then did was to

• remove the node_modules directory
• remove the .storybook directory
• delete all storybook deps from package.json
• re-initialize the Storybook running npx storybook@latest init