[Bug]: "storybook-config-entry.js doesn't exist" - building Storybook 7.0.0-alpha.52 & Angular 14 Component Library

[Franccescalee]

Describe the bug

In a new Angular 14 library with Storybook 7.0.0-alpha.52 - error when running "npm run storybook"
I can't find any help online for this specific issue/version.
From what I'm reading online Storybook 7.0.0-alpha.52 is the only version that works with Angular 14?

[10:06:47] Generating documentation in export format json
[10:06:47] Documentation generated in ./ in 0.15 seconds
@storybook/cli v7.0.0-alpha.52
(node:9374) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info => Loading presets
info => Loading presets
info => Loading presets
info => Starting manager..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/Users/me/Components/.storybook/tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0. 
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "tadpull-components:build" for configuring Storybook
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% done plugins webpack-hot-middlewarewebpack built preview e308b01dd9b58334ef38 in 3250ms
WARN Force closed manager build
99% end closing watch compilationWARN Force closed preview build
info => Loading presets
✔ Would you like to send crash reports to Storybook? … yes

ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/me/Components/storybook-config-entry.js' in '/Users/me/Components'
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/Compilation.js:2016:28)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:798:13)
    at eval (eval at create (/Users/me/Components/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:10:1)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:270:22)
    at eval (eval at create (/Users/me/Components/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:9:1)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:434:22)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:116:11)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:670:25)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:855:8)
    at <anonymous> (/Users/me/Components/node_modules/webpack/lib/NormalModuleFactory.js:975:5)
resolve '/Users/me/Components/storybook-config-entry.js' in '/Users/me/Components
  using description file: /Users/me/Components/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    root path /Users/me/Components
      using description file: /Users/me/Components/package.json (relative path: ./Users/me/Components/storybook-config-entry.js)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/me/Components/storybook-config-entry.js doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          /Users/me/Components/storybook-config-entry.js.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/me/Components/storybook-config-entry.js.js doesn't exist
        .jsx
          Field 'browser' doesn't contain a valid alias configuration
          /Users/me/Components/storybook-config-entry.js.jsx doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /Users/me/Components/storybook-config-entry.js.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          

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

To Reproduce

Use Angular 14 cli to create new angular component library (used commands in https://angular.io/guide/creating-libraries)
Run "npx sb@next init"
Run "npm run storybook"
Change "extends": "../false" in storybook/tsconfig.json to "extends": "../tsconfig.json"

System

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 18.12.1 - /opt/homebrew/bin/node
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-interactions: ^7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-links: ^7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/angular: ^7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

[yuri-scarbaci-lenio]

We are being affected by the same using

  framework: {
    name: '@storybook/react-webpack5',
    options: { 
      fastRefresh: true,
      strictMode: true,
    },
  }

npx sb@next info

 Environment Info:

  System:
    OS: macOS 12.6
    CPU: (8) x64 Apple M1 Pro
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.19.3 - ~/Desktop/Elliemae/dimsum/node_modules/.bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 106.0.5
    Safari: 16.0
  npmPackages:
    @storybook/addon-a11y: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-essentials: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-events: ~6.3.0-alpha.21 => 6.3.0-alpha.21 
    @storybook/addon-interactions: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-links: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/addon-storysource: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/builder-webpack5: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/manager-webpack5: 7.0.0-alpha.10 => 7.0.0-alpha.10 
    @storybook/react: 7.0.0-alpha.52 => 7.0.0-alpha.52 
    @storybook/react-webpack5: 7.0.0-alpha.0 => 7.0.0-alpha.0 
    @storybook/theming: 7.0.0-alpha.52 => 7.0.0-alpha.52 

this also happens with storybook version @6.5.x

reading around the issues from storybook it seems to be related with pnpm

we already tried to no avail (in both version 7.0.0-alpha.52 and 6.5.x) to implements the workarounds at #13428

so for clarity this is our .npmrc

legacy-peer-deps=true
shamefully-hoist=true
enable-pre-post-scripts=true
git-checks=false
strict-peer-dependencies=false
public-hoist-pattern[]=*storybook*

we are using CSF3 format
our webpack.js stories loader looks like this

const getStories = () =>
  fg.sync([
    normalizePath(path.resolve(__dirname, `../stories/**/index.stories.@(js|jsx|ts|tsx)`)),
    normalizePath(path.resolve(__dirname, '../stories/**/*.stories.mdx')),
    '!**/node_modules',
  ]);
module.exports = {
  stories: async () => [...getStories()],
  ...

as per #19094
We have a dedicated stories folder containing only stories

we only load index.stories.js file since they are the only one following the CSF3 format and we explicitly don't load the other .stories.js file because they export only the component no more as in our index.stories.js lookes like so

export default {
  title: 'Advanced/Customization',
  component: null,
};

export { Customization } from './Customization.stories';

and we use the .stories.js extension for ts-linting purposes (we have different linting rules based on the extension)
mentioning all of this even tho it should be transaprent to this ticket just to avoid confusion

[yuri-scarbaci-lenio]

Can we have some insight regarding
storybook-config-entry.js and where exactly it is being required/imported ?
Are we missing a file? we never created such a file anywhere and I can't find any related documentation mentioning this file

[yuri-scarbaci-lenio]

Relates to #19927 (comment) ?

[Franccescalee]

I was able to get past the error above by running "npm i [email protected]" that I found here in a different issue.

That got me passed the error and I was able to run storybook but now I get this error in the browser:

Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Components/stories/Header.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/me/Components/node_modules/@ngtools/webpack/src/ivy/loader.js:67:18

I have no storybook-config-entry.js file. If I search my project I get a hit here: node_modules/@storybook/builder-webpack5/dist/presets/preview-preset.js

[Franccescalee]

Getting closer: I added these to my tsconfig.json and now it spins up and I can load the sample stories.

"include": [
"../stories/Introduction.stories.mdx",
"../stories/*.stories.ts",

I'll start adding some of my own components and stories and see if everything works OK.

[valentinpalkovic]

The underlying issue got fixed. I cannot reproduce the issue anymore. Therefore, I will close this.