Storybook: 4.0.9 -> 4.1.1 storybook no longer serves

[rosskevin]

Describe the bug
After upgrading from 4.0.9 -> 4.1.1, storybook no longer starts a server.

 yarn start-storybook -p 6006 -c .storybook
yarn run v1.12.3
$ /Users/kross/projects/js/node_modules/.bin/start-storybook -p 6006 -c .storybook
info @storybook/react v4.1.1
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using base config because react-scripts is not installed.
info => Loading custom webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
Happy[ts]: Version: 5.0.0. Threads: 4
Happy[ts]: All set; signaling webpack to proceed.
 10% building 1/3 modules 2 active ...ck-hot-middleware/client.js?reload=true@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "70",
  "ios": "12"
}

Using modules transform: false

Using plugins:
  syntax-async-generators { "chrome":"70", "ios":"12" }
  syntax-object-rest-spread { "chrome":"70", "ios":"12" }
  proposal-json-strings { "chrome":"70", "ios":"12" }
  syntax-optional-catch-binding { "chrome":"70", "ios":"12" }

Using polyfills with `usage` option:

[/Users/kross/projects/js/.storybook/config.js] Based on your code and targets, none were added.
 10% building 5/6 modules 1 active .../js/.storybook/__generated__/stories.js
[/Users/kross/projects/js/.storybook/__generated__/stories.js] Based on your code and targets, none were added.
webpack built 7c3fdeff532b3f9ef8b1 in 27152ms

^^^this just hangs there and recompiles on code changes.

When I run a build-storybook, I have new complaints about the manager:

yarn run v1.12.3
$ build-storybook -c .storybook -o .storybook-out
info @storybook/react v4.1.1
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Loading custom addons config.
info => Compiling manager..
ERR! => Failed to build the manager
ERR! Module not found: Error: Can't resolve '../packages/ui/src/test/storybook/form/register' in '/Users/kross/projects/js/.storybook'

^^^not sure if related to #4995 but I haven't touched any manager code in the past.

To Reproduce

webpack.config.js

const HappyPack = require('happypack')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = (baseConfig, env, defaultConfig) => {
  // setup resolve before merging
  defaultConfig.resolve.extensions.push('.ts', '.tsx')
  if (!defaultConfig.resolve.plugins) {
    defaultConfig.resolve.plugins = []
  }
  defaultConfig.resolve.plugins.push(new TsconfigPathsPlugin())

  const merged = {
    // keep storybook's defaults
    ...defaultConfig,

    // add our rules (required for SASS loaders, js/happypack, etc)
    module: {
      rules: [
        // https://github.com/storybooks/storybook/issues/4503
        // using `baseConfig` instead of `defaultConfig` because
        // default included additional CSS rules which caused errors
        // when importing a component which imported a CSS file, like
        // `import from 'read/dist/style.css'`

        // https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669
        ...baseConfig.module.rules.filter(
          rule =>
            !(
              rule.use &&
              rule.use.length &&
              rule.use.find(({ loader }) => loader === 'babel-loader')
            ),
        ),
        {
          test: /\.jsx?$/,
          include: require('path').resolve('./'),
          exclude: /(node_modules|dist)/, // exclude any commonjs files
          loader: 'babel-loader',
        },
        {
          test: /\.tsx?$/,
          loader: 'happypack/loader?id=ts',
        },
        {
          loader: 'graphql-tag/loader',
          test: /\.(graphql|gql)$/,
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },

    // add our plugins (babel transforms, etc)
    plugins: [
      ...defaultConfig.plugins,
      new HappyPack({
        id: 'ts',
        loaders: [
          {
            path: 'babel-loader',
          },
          {
            path: 'ts-loader',
            query: {
              happyPackMode: true,
            },
          },
        ],
        threads: 4,
      }),
    ],
  }

  merged.devtool = 'source-map'
  return merged
}

config.js

import { configure } from '@storybook/react'
import { setAddon, addDecorator } from '@storybook/react'
import JSXAddon from 'storybook-addon-jsx'
import { withOptions } from '@storybook/addon-options'
import 'storybook-chromatic'

setAddon(JSXAddon)

addDecorator(
  withOptions({
    addonPanelInRight: true,
    hierarchySeparator: /\//,
  }),
)

function loadStories() {
  require('./__generated__/stories.js')
}

configure(loadStories, module)

Expected behavior

• Starts and serves
• builds static resources

System:

• OS: osx
• Version: 4.1.1

Additional context
Add any other context about the problem here.

[dandean]

I'm also running into this issue.

[dandean]

I figured this out for my use case. The issue is that I have a custom addon written in TypeScript. It looks like addons now get processed by a separate webpack process with its own webpack config. This is confusing to figure out because without the fix the process just hangs. After some debugging I found that the new builder is swallowing the webpack error which points this out.

The fix was to add configuration to support compiling the TypeScript files to the new webpack config so that it _also_ knows how to import TypeScript and other kinds of resources:

// .storybook/presets/js
const path = require('path');
module.exports = [path.resolve('./.storybook/my-preset')];

// .storybook/my-presets.js
exports.managerWebpack = async function(baseConfig, options) {
  if (!baseConfig.module) {
    baseConfig.module = {};
  }

  if (!baseConfig.module.rules) {
    baseConfig.module.rules = [];
  }

  // Add typescript loader for ts and tsx files:
  baseConfig.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [require.resolve('awesome-typescript-loader')]
  });

  // My readme addon itself import local css file and files from Prism, so have
  // to add webpack config to support that:
  baseConfig.module.rules.push({
    test: /(addon-readme\/style\.css|prism-.*\.css)$/,
    use: 'raw-loader'
  });

  baseConfig.resolve.extensions.push('.ts', '.tsx');

  return baseConfig;
};

[ndelangen]

@rosskevin can you share a reproduction so i can take a look?

[rosskevin]

Thanks @dandean, I also have a custom add-on in my monorepo codebase. I'll try what you mentioned. @ndelangen if that doesn't work I'll put up a reproduction repo today.

[rosskevin]

It seems I have same issue as @dandean, I have a custom addon in our monorepo codebase and it was silently failing. I have added the manager preset that works but have questions.

@ndelangen is this preset building all the code? It appears so in my case.

Do I still need my custom webpack.config.js?

My concern is building all the code with the preset/manager, then building all the code again for stories - I was already concerned with build time now more so.

[methyl]

Having the same issue with default config from guide, downgrading to 4.0.9 solves the problem

[shilman]

Hi all, It seems like this was an unintentional breaking change in 4.1, and we're trying to come up with a suitable fix ASAP. I'm closing this as a duplicate to #4995 and let's consolidate the conversation there. (Or correct me if they are actually different issues and I'm happy to reopen). Thanks for your patience!