@storybook/addon-storyshots supports only main.js

[iiroj]

Describe the bug

The getMainFile method of the storyshots addon has a hardcoded name for the new configuration style for version 5.3 of main.js. This prevents usage of TypeScript, for example, where the file is main.ts.

You can see the file name here:

storybook/addons/storyshots/storyshots-core/src/frameworks/configure.ts

Line 47 in 76c3f3a

const main = path.join(configDir, 'main.js');

It seems the getPreviewFile method correctly supports both JS and TS files.

This results in storyshots failing with storyshots found 0 stories.

If I edit this method to also include TS files, it seems to start working again:

const getMainFile = (configDir: string): string | false => {
  const main = path.join(configDir, 'main.js');
  const mainTS = path.join(configDir, 'main.ts');

  if (isFile(main)) {
    return main;
  }

  if (isFile(mainTS) {
    return mainTS;
  }

  return false;
};

[shilman]

The file is never main.ts, at least for now.

[iiroj]

Thanks for the reply, @shilman. I assume it then works by accident? I’ll update my repo.

[shilman]

Does it really work?! 😱 If so, sorry for the misinformation. Reopening this.

[iiroj]

Well, at least start-storybook and build-storybook seem to run fine with a main.ts. I was having trouble only with the @storybook/addon-storyhots not finding any stories.

For now I've gotten along by converting to main.js, but having everything typed would be nice, of course.

Looking at the source, it seems main is required here without a hard-coded extension:

storybook/lib/core/src/server/common/custom-presets.js

Line 7 in ba6b4c8

const main = serverRequire(path.resolve(configDir, 'main'));

Let me confirm this to you tomorrow since I managed to fix everything related to the 5.3 migration, but using a main.js. If it really works 100 % with main.ts I'll let you know.

[tobias-kuendig]

I can confirm this problem. Since the update to 5.3 the following storyshots test file does no longer find any stories:

import initStoryshots from '@storybook/addon-storyshots'

const registerRequireContextHook = require('babel-plugin-require-context-hook/register')

registerRequireContextHook()
initStoryshots({
  framework: 'vue',
  configPath: './config/storybook/'
})

storyshots found 0 stories

I also use a main.ts.

[shilman]

So main.ts works -- played around with it yesterday -- tho AFAICT support for it is entirely accidental. @mrmckeb and I played around for a few minutes and couldn't figure out WHY it works (that serverRequire is doing something tricky cc @igor-dv ). At any rate, will merge the fix. Thanks @iiroj !!!

[iiroj]

Sorry that I never replied to this. Any idea when the fix would be merged?

[shilman]

Sorry, completely forgot about this. 🙈 Merging now!

[iiroj]

Cool, working now!

Although it seems only module.exports works, when using export default causes no configuration to be found.

[arty-name]

I came here looking for an issue for not working "export default". @iiroj, do you want to open a new issue for that bug?