Error reading preview.js: TypeError: e.replace is not a function

[devonpmack]

Describe the bug

After upgrading to the latest storybook version (v6.5.2) we now see this error with stories assembled using build-storybook. It works with start-storybook. Any ideas why?

Error reading preview.js:

TypeError: e.replace is not a function
    at e.exports (main.2467dbf8.iframe.bundle.js:2:6913751)
    at N (main.2467dbf8.iframe.bundle.js:2:94604)
    at main.2467dbf8.iframe.bundle.js:2:100176
    at e.value (main.2467dbf8.iframe.bundle.js:2:100219)
    at main.2467dbf8.iframe.bundle.js:2:243906
    at Array.forEach (<anonymous>)
    at Object.p [as nextFn] (main.2467dbf8.iframe.bundle.js:2:243841)
    at main.2467dbf8.iframe.bundle.js:2:7017026
    at Array.forEach (<anonymous>)
    at i._runResolutions (main.2467dbf8.iframe.bundle.js:2:7016981)

To Reproduce
I can only reproduce in CI, sorry

Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions.
Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

System
Environment Info:

System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.17 - ~/yarn/1.22.17/bin/yarn
npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
Chrome: 101.0.4951.64
Firefox: 100.0
Safari: 15.4

Additional context
Add any other context about the problem here.

[ahuth]

Seeing the same thing, although with un-minified names:

TypeError: path.replace is not a function
    at module.exports (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:45891:14)
    at userOrAutoTitleFromSpecifier (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:27542:43)
    at userOrAutoTitle (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:27565:17)
    at StoryStoreFacade.addStoriesFromExports (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:27761:15)
    at http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:44753:35
    at Array.forEach (<anonymous>)
    at Object.getProjectAnnotations [as nextFn] (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:44748:37)
    at http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:404136:29
    at Array.forEach (<anonymous>)
    at SynchronousPromise._runResolutions (http://127.0.0.1:8000/vendor.1cf5a612.iframe.bundle.js:404133:19)

I debugged it a bit and the filename at

storybook/lib/store/src/autoTitle.ts

Line 55 in fb8acad

const normalizedFileName = slash(fileName);

is a number, even though (per the TS types) it should be a string.

Changing it to slash(String(filename)) "fixed" it, although I'm not sure why filename would be a number.

Also, not sure it's related, but I am using webpack 5.

[virtuoushub]

Changing it to slash(String(filename)) "fixed" it, although I'm not sure why filename would be a number.

tysm @ahuth ! I was able to use this in conjunction with yarn patch and make a workaround: https://github.com/redwoodjs/example-storybook/pull/71/files#diff-d8e15d5e4bed165ebd456dc1c242ae90cc32862af792be38098f01970b035c1d

[yannbf]

Thanks a lot for figuring that out @ahuth ! @shilman if you're working on it, it might be a good idea to add a comment to explain why we need to cast the fileName, as it can be a number in production builds from Webpack

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.5-alpha.3 containing PR #18307 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.5 containing PR #18307 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade