Storybook: Story search does not work in production mode

Created on 6 Mar 2019  路  4Comments  路  Source: storybookjs/storybook

Thanks for the great library, super excited about SB5.0!

Describe the bug
In production mode, typing two characters into the search fails with the error:

Uncaught TypeError: i.parameters.fileName.includes is not a function

Typing > 2 characters leads to:

Uncaught TypeError: e.toLocaleLowerCase is not a function

In development, this is not an issue.

To Reproduce
Steps to reproduce the behavior:

  1. Create a custom webpack config, and force the config.mode = "production"
  2. Start up storybook locally
  3. Type in two or more characters you expect to match
  4. See error

Tracing through, I found that the parameters.fileName is a number when config.mode = "production" and a string in dev (the actual real file name)

I've also seen this behavior in a storybook from other person's issue:
https://next--storybooks-official.netlify.com/?path=/story/ui-panel--default (from #5772)

Expected behavior
Searching for components should work in development and in production

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets

// From my own project
const baseConfig = require("../webpack.config")
module.exports = ({ config, mode }) => {
  config.mode = "production";
  config.module = baseConfig.module;
  config.resolve = baseConfig.resolve;
  config.optimization = baseConfig.optimization;
  return config;
};
// ...baseConfig
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          sourceMap: true,
          parallel: true,
          cache: true,
          uglifyOptions: {
            compress: {
              conditionals: false,
              warnings: false,
            },
          },
        }),
      ],
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          commons: {
            name: "vendor",
            test: /[\\/]node_modules[\\/]/,
          },
        },
      },
    },

System:

  • OS: MacOS Mojave
  • Device: MacbookPro 2018
  • Browser: Chrome, Safari
  • Framework: React
  • Addons: [if relevant]
  • Version: [e.g. 5.0.0]

Additional context
Add any other context about the problem here.

  • Webpack: "webpack": "4.8.3"
bug core has workaround high priority ui

Most helpful comment

Thanks @ehzhang for the bug, the fix, AND the workaround! You're awesome 馃挴!!! Waiting for more PR comments, then will merge & release unless there's a better solution.

All 4 comments

I've been able to make a workaround for this issue by setting in my storybook webpack config:

config.optimization.moduleIds = "named"

https://webpack.js.org/configuration/optimization/#optimizationmoduleids

Thanks @ehzhang for the bug, the fix, AND the workaround! You're awesome 馃挴!!! Waiting for more PR comments, then will merge & release unless there's a better solution.

w00t!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.1 containing PR #5909 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

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

Egads!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.1 containing PR #5909 that references this issue. Upgrade today to try it out!

Was this page helpful?
0 / 5 - 0 ratings