Blank output with Storybook-Static

[rprasad25]

Describe the bug I'm creating a storybook that includes typescript with react. The stories are located at ./stories (not in src). I have a separate webpack.config for storybook as well. I'm running the build-storybook command, and then running npx http-server .out, and the result is a blank screen; completely blank with only the tab saying the name of the output.

Expected behavior I expect the server to launch a static version of storybook Code snippets .storybook webpack config:

const path = require("path");
const config = require("config");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const CONFIG = config.has("public") ? config.get("public") : {};

module.exports = {
  entry: "./src/app/index.tsx",
  resolve: {
    extensions: [".ts", ".tsx", ".js", "json"],

  },
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.min.js",
  },
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      },
      {

        test: /\.css$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ["file-loader"],
        include: path.resolve(__dirname, '../')
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
    },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
    new webpack.DefinePlugin({
      CONFIG: JSON.stringify(CONFIG),
    }),

  ],
};

./storybook/Main.js

module.exports = {
  stories: ['../stories/**/*.stories.[tj]sx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs/register'],
  webpackFinal: async config => {
    // do mutation to the config

    return config;
  },
};

npm run storybook works perfectly fine, and launches storybook on a local port, but when I run the npx server, it doesn't show me anything.

System: Ubuntu 18.04 Most recent node/react/typescript/sb

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ricardoaguiar]

I have the same issue.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[eric-burel]

Probably not the same issues but in v6.0.0-rc13 with static build and serving with "serve", I have blank stories, without any relevant error message. "__DebugMessage" randomly displays on the story, sometimes it even loads after a refresh, but mostly broken.

[shilman]

Does anybody have a reproduction for this?

[eric-burel]

I have a full setup here: https://github.com/VulcanJS/vulcan-next-starter. You can run yarn install and yarn run build-storybook as usual, you also have yarn run start:storybook-static to run the build using serve. Last time I checked it did not work correctly as described above.

[shilman]

@eric-burel try changing "serve storybook-static" to "http-server storybook-static". i think it's a bug in serve

[eric-burel]

I can reproduce with http-server too on my demo. I've added the "/public" folder to the build just in case it was that, but still the same issue. I did not have this problem with Storybook 5 on an app with a similar architecture. What bugs me is that I don't get much error messages, so I can't really investigate :/

[shilman]

Ok I'll take another look on Monday

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@eric-burel sorry for the slow turnaround on this. i checked out your repo and i can't even get storybook or build-storybook to work -- they both hang for me. also upgraded to 6.0.10...

[eric-burel]

Yeah I've been signaled the same issue by another developer on Ubuntu 20, Storybook did not even run on his machine, while it runs on my Ubuntu 18. Will investigate. My setup is kinda basic for a Next app, except that I've added addons, I really hope we can solve that.

[shilman]

I'm on OSX 10.14.6. I don't think it's related to addons -- commented all of them out. I also tried commenting out the extendWebpackConfig thing. still hanging.

[eric-burel]

I've fixed the yarn run analyze-bundle:storybook command in case it can help, but I see nothing weird in the webpack build:

I've tried removing all stories, removed custom code, but still get the hooks issue on my side. Webpack build is finishing ok though. You are describing the exact same behaviour as noticed on Ubuntu 20, which I still can't repro on Ubuntu 18 after a reinstall.

[ghtjiann4321]

Just tested this now.. Using "serve" it doesn't load the stories. Tried installing "http-server" and It loads the stories. The new issue is that I need to refresh the browser in order for me to change to a different story. clicking other stories doesn't reload the canvas.

[eric-burel]

Ok, after fixing my issues with hooks, I eventually managed to rebuild. I indeed have a better behaviour with http-server, the first story is loaded correctly. With serve, the app is mostly ok, but the first story need a refresh. So same behaviour as @ghtjiann4321

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!