Storybook: Storybook busted on 5.3.10

[lifeiscontent]

Describe the bug

ERROR in ./.storybook/generated-entry.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/lifeiscontent/Source/lifetime/storybook/.storybook/generated-entry.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/lifeiscontent/Source/lifetime/node_modules/@babel/preset-env/lib/index.js")
    at getPlugin (/Users/lifeiscontent/Source/lifetime/node_modules/@babel/preset-env/lib/index.js:67:11)
    at /Users/lifeiscontent/Source/lifetime/node_modules/@babel/preset-env/lib/index.js:258:62
    at Array.map (<anonymous>)
    at /Users/lifeiscontent/Source/lifetime/node_modules/@babel/preset-env/lib/index.js:258:43
    at /Users/lifeiscontent/Source/lifetime/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/lifeiscontent/Source/lifetime/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/lifeiscontent/Source/lifetime/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/lifeiscontent/Source/lifetime/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/Users/lifeiscontent/Source/lifetime/node_modules/gensync/index.js:284:5)
    at Function.errback (/Users/lifeiscontent/Source/lifetime/node_modules/gensync/index.js:108:7)
    at errback (/Users/lifeiscontent/Source/lifetime/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
    at async (/Users/lifeiscontent/Source/lifetime/node_modules/gensync/index.js:183:31)
    at onFirstPause (/Users/lifeiscontent/Source/lifetime/node_modules/gensync/index.js:209:13)
    at Generator.next (<anonymous>)
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[2]

the only file I have in the .storybook folder is main.ts

module.exports = {
  stories: ['../stories/*.stories.tsx']
};

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context
Add any other context about the problem here.

[shilman]

cc @ndelangen

[lifeiscontent]

@shilman this ended up working once I changed all my storybook configs back to .js

[shilman]

Possibly related https://github.com/storybookjs/storybook/pull/10099

[ndelangen]

the only file I have in the .storybook folder is main.js

@shilman this ended up working once I changed all my storybook configs back to .js

I'm confused

[mayteio]

I had the same issue. Turns out its an issue with react-scripts 8680 so I fixed it by;

1. deleting node_modules
2. updating all dependancies on react-script 3.4.0 to 3.4.1 (monorepo)
3. yarn
4. storybook working again.

[ndelangen]

@Aaron-Pool are you still having this issue? Could the elaborate on what's wrong?

[shilman]

I think you mean @lifeiscontent 😂

[Aaron-Pool]

How did I get here? Where did it all go wrong? 🤔

[lifeiscontent]

the only file I have in the .storybook folder is main.js

@shilman this ended up working once I changed all my storybook configs back to .js

I'm confused

Sorry, corrected. main.ts

[alex-ald]

I have the same issue. I ran npx @storybook/cli init within an angular application. Then ran npm run storybook, but received the same errors. (using v5.3.17)
story files were .ts

ERROR in ./.storybook/generated-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/alexald/Dev/crafteddrones/ui-kit/.storybook/generated-entry.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/preset-env/lib/index.js")
    at getPlugin (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/preset-env/lib/index.js:67:11)
    at /Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/preset-env/lib/index.js:258:62
    at Array.map (<anonymous>)
    at /Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/preset-env/lib/index.js:258:43
    at /Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/gensync/index.js:254:32)
    at evaluateAsync (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/gensync/index.js:284:5)
    at Function.errback (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/gensync/index.js:108:7)
    at errback (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
    at async (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/gensync/index.js:183:31)
    at onFirstPause (/Users/alexald/Dev/crafteddrones/ui-kit/node_modules/gensync/index.js:209:13)
    at Generator.next (<anonymous>)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true main[2]

....

ERROR in /Users/alexald/Dev/crafteddrones/ui-kit/src/stories/0-Welcome.stories.ts
ERROR in /Users/alexald/Dev/crafteddrones/ui-kit/src/stories/0-Welcome.stories.ts(1,25):
TS2307: Cannot find module '@storybook/angular/demo'.

ERROR in /Users/alexald/Dev/crafteddrones/ui-kit/src/stories/1-Button.stories.ts
ERROR in /Users/alexald/Dev/crafteddrones/ui-kit/src/stories/1-Button.stories.ts(4,24):
TS2307: Cannot find module '@storybook/angular/demo'.

[alex-ald]

Adding the dependency @babel/compat-data": "7.8.0" fixed the issue for me.

Resource: https://stackoverflow.com/questions/60790726/could-not-find-plugin-proposal-numeric-separator-in-angular-app

[ndelangen]

I can't even find what that package does... it has no readme.

[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!

[lifeiscontent]

Solution: use .js configs