storybook: Unable to use Storybook as expected in a monorepo

This is important. "@storybook/react": "^6.3.4", doesn’t have it. Here is the main file. Only stories at root folder works and not inside any of packages/**

module.exports = {
  stories: [
    '../packages/**/*.stories.mdx',
    '../packages/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
}

@shilman This is closed. Not sure why. What would be the workaround?

@claudio-moya Could you please post your patch?

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 containing PR #8822 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

I am also unable to get SB5 working with our Lerna monorepo. We have a custom Webpack config which I haven’t had any success updating to the single signature format. Initially it was blowing up on the .css files (we use PostCSS), and after some trial and error I progressed to it blowing up on the JSX parsing.

// webpack.config.js
module.exports = async ({ config, mode }) => {
  config.module.rules.push(babelLoader)
  config.module.rules.push(cssLoader)

  return config;
}

Storybook will run with above config if I only include a trivial example, however when I attempt to load a story with some of our monorepo components, I get a bunch of errors like:

Module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type.

and

Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

For comparison, my working SB4 custom Webpack config is

module.exports = storybookBaseConfig => {
  storybookBaseConfig.module.rules.push(babelLoader);
  storybookBaseConfig.module.rules.push(cssLoader);

  return storybookBaseConfig;
};

PR is open addressing this, will be a 6.0.0 feature

this should not be closed. This issue will only be more important with the rise of Nrwl NX

@ndelangen Ok, no problem. I’m pretty sure it is a very specific problem to monorepos with Gatsby and storybook not at the root of the project. Take care!

@Jimmydalecleveland removing that include is on my todo list, but I’m afraid of it messing up people’s setup, So I want to do it for the next major (6.0) I think.

My solution works because it simply removes all include filters.

Yours work, because… I have no freaking clue why. 😭 not enough context on the project file structure to really judge.

@ndelangen Thank you for the quick response. I solved this problem last night differently, and now that I’ve tried your suggestion and it also works, I’m not understanding why.

I pushed a separate include rule: path.resolve('../../node_modules/gatsby') because my understanding was that Gatsby has un-transpiled ES6 code and I saw from the Error I previously posted that it was failing when encountering JSX in my project’s root /node_modules/gatsby. That worked, but I’m not sure why your suggestion works, since it is removing the include for the inner yarn workspace package. If you don’t mind, could you explain that a bit?

If you need more context, here is the before and after log of what that config looks like after applying your suggestion:

// before deleting include rule
{
  test: /\.(mjs|jsx?)$/,
  use: [ { loader: 'babel-loader', options: [Object] } ],
  include: [ './my-project/themes/gatsby-theme-storybook' ],
  exclude: [ './my-project/themes/gatsby-theme-storybook/node_modules' ]
}

// after
{
  test: /\.(mjs|jsx?)$/,
  use: [ { loader: 'babel-loader', options: [Object] } ],
  exclude: [ './my-project/themes/gatsby-theme-storybook/node_modules' ]
}

And this is the line I was previously using that worked in ./my-project/themes/gatsby-theme-storybook/.storybook/webpack.config.js: config.module.rules[0].include.push(path.resolve('../../node_modules/gatsby'))

Thanks again, I really appreciate it.

thanks @Jimmydalecleveland, your fix worked for me! I also have a gatsby app inside a monorepo with yarn workspaces and kept getting an ambiguous error from nodemodules/gatsby when running yarn storybook

@Jimmydalecleveland run storybook with the --debug-webpack flag and it will print the webpack config for you.

Look at the loaders defined and you’ll see there are exclude & include rules for the loaders responsible for transpiling code.

I think if you just remove the include property, it should start to work for you.

Just noticed this import is not working when using in a Lerna monorepository import '@fortawesome/fontawesome-svg-core/styles.css';. When copied @fortawesome folder inside storybook folder’s node_modules folder, the import started working (although can’t get FA icons to show up yet)…

Sorry I should add I guess what I did to work around #3346 is:

  const babelLoader = storybookBaseConfig.module.rules[0];
  babelLoader.exclude.push(
    path.resolve('./lib/components/node_modules'),
    /* etc */
  );

Which is perhaps a little simpler and less disruptive that what you posted…

We don’t have a lerna tag – compatibility with other tools is our catchall. If I see a lot more lerna-related issues I’ll def create one.