Request: Support For Stories Distributed Amongst Lerna Packages

Is your feature request related to a problem? Please describe. At present Storybook will not work with stories distributed amongst packages in a monorepo. Storybook’s babel loader assumes that it only needs to transpile js within src, so if you use a configuration that looks for stories outside of ./src that are not transpiled, for example:

const req = require.context('../../../packages', true, /.stories.js$/)

Loading these (untranspiled) stories results in errors such as:

ERROR in ../components/src/components/nav/LinkList/LinkList.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type.

This is because it is encountering JSX in files that are outside of src that are not transpiled and is choking on them.

Describe the solution you’d like It would be great if Storybook offered a config option to specify which directories it should load using babel-loader.

Describe alternatives you’ve considered There is a generic solution for create-react-apps here

Are you able to assist bring the feature to reality? maybe

[hipstersmoothie]

This should work. I have a storybook that loads stories from another monorepo package. Try adding this to your storybook webpack config. Find the babel rule in loaders and modify the include and exclude to include the parent directory (for a monorepo this will be packages).

module.exports = (baseConfig, env, config) => {
  // Find Babel Loader
  const babelRules = config.module.rules.filter(rule => {
    let isBabelLoader = false;

    if (rule.loader && rule.loader.includes('babel-loader')) {
      isBabelLoader = true;
    }

    if (rule.use) {
      rule.use.forEach(use => {
        if (typeof use === 'string' && use.includes('babel-loader')) {
          isBabelLoader = true;
        } else if (
          typeof use === 'object' &&
          use.loader &&
          use.loader.includes('babel-loader')
        ) {
          isBabelLoader = true;
        }
      });
    }

    return isBabelLoader;
  });

  babelRules.forEach(rule => {
    rule.include = /../;
    rule.exclude = /node_modules/;
  });
  
  return config;
};

Let me know if it helps you!

[earGO]

this

This should work. I have a storybook that loads stories from another monorepo package. Try adding this to your storybook webpack config. Find the babel rule in loaders and modify the include and exclude to include the parent directory (for a monorepo this will be packages).

module.exports = (baseConfig, env, config) => {
  // Find Babel Loader
  const babelRules = config.module.rules.filter(rule => {
    let isBabelLoader = false;

    if (rule.loader && rule.loader.includes('babel-loader')) {
      isBabelLoader = true;
    }

    if (rule.use) {
      rule.use.forEach(use => {
        if (typeof use === 'string' && use.includes('babel-loader')) {
          isBabelLoader = true;
        } else if (
          typeof use === 'object' &&
          use.loader &&
          use.loader.includes('babel-loader')
        ) {
          isBabelLoader = true;
        }
      });
    }

    return isBabelLoader;
  });

  babelRules.forEach(rule => {
    rule.include = /../;
    rule.exclude = /node_modules/;
  });
  
  return config;
};

Let me know if it helps you!

This one helped with local storybooks while importing components from other packages. Thank you!!