Storybook: Storyshots with Storybook 4 for React fails with Angular import.

[swernerx]

Framework Loaders tries to load Angular stuff in React environment

After updating from 4.0-alpha.4 to -alpha.9 I see the following happens:

Cannot find module '@storybook/angular/options' from 'loader.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:210:17)
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/angular/loader.js:7:16)

This is the not touched Story.test.js which is used to execute the test runner:

import initStoryshots, {
  multiSnapshotWithOptions
} from "@storybook/addon-storyshots"
import { dirname } from "path"

initStoryshots({
  // Delegate to centralized config
  configPath: dirname(require.resolve("edge-storybook")),

  // Storing seperate snapshots for each individual story
  test: multiSnapshotWithOptions({}),

  // Ignore all containers, only snapshot pure components
  // without any app logic or data fetching
  storyKindRegex: /^((?!container).)*$/i
})

Steps to reproduce

Executing jest on the command line.

Please specify which version of Storybook and optionally any affected addons that you're running

• storybook/react 4.0.0-alpha.9
• storybook/addon-actions 4.0.0-alpha.9
• storybook/addon-links 4.0.0-alpha.9
• storybook/addon-storyshots 4.0.0-alpha.9
• storybook/addon-viewport 4.0.0-alpha.9
• jest 23.1.0

[igor-dv]

It will be fixed with #3745

[swernerx]

The issue seems relatively obvious after starting studying the current code base:

This is the code from src/frameworkLoader.js:

import loaderReact from './react/loader';
import loaderRn from './rn/loader';
import loaderAngular from './angular/loader';
import loaderVue from './vue/loader';
import loaderHTML from './html/loader';

const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue, loaderHTML];

function loadFramework(options) {
  const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));

  if (!loader) {
    throw new Error('storyshots is intended only to be used with storybook');
  }

  return loader.load(options);
}

export default loadFramework;

Three of these loaders are trying to import @storybook/angular/options:

• angular
• html
• vue

The loader system might need some rework that there is no assumption for frameworks which are not installed or needed.

[igor-dv]

This is a bug that happened recently, and after the merging of #3745, it will be fixed.

[JCMais]

@igor-dv may we get a new alpha version with this fix?

[igor-dv]

I assume it will be soon

[malixsys]

Any news on the next alpha version? Will it be @storybook/[email protected] ?