Storybook: Static build assets are not loading storybook

Created on 28 Feb 2018 · 13Comments · Source: storybookjs/storybook

Issue details

I am building storybook. When trying to load the resulting files, I get this error.

manager.43f5b3475a944261b3fa.bundle.js:formatted:19449 Uncaught (in promise) TypeError: Cannot read property 'children' of undefined
at resolveStyles (manager.43f5b3475a944261b3fa.bundle.js:formatted:19449)
at RadiumEnhancer.render (manager.43f5b3475a944261b3fa.bundle.js:formatted:19191)
at callMethod (manager.43f5b3475a944261b3fa.bundle.js:formatted:409)
at RadiumEnhancer.render (manager.43f5b3475a944261b3fa.bundle.js:formatted:414)
at renderComponent (manager.43f5b3475a944261b3fa.bundle.js:formatted:821)
at setComponentProps (manager.43f5b3475a944261b3fa.bundle.js:formatted:805)
at buildComponentFromVNode (manager.43f5b3475a944261b3fa.bundle.js:formatted:686)
at idiff (manager.43f5b3475a944261b3fa.bundle.js:formatted:691)
at innerDiffNode (manager.43f5b3475a944261b3fa.bundle.js:formatted:743)
at idiff (manager.43f5b3475a944261b3fa.bundle.js:formatted:753)

Steps to reproduce

npm run build-storybook
cd storybook-static
python -m SimpleHTTPServer
go to browser, http://localhost:8000

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 3.3.14

Affected platforms

_If UI related, please indicate browser, OS, and version_
_If dependency related, please include relevant version numbers_
_If developer tooling related, please include the platform information_

Screenshots / Screencast / Code Snippets (Optional)

1 using "@storybook/react": "^3.3.14",
2. config.js
/*
 * Configure Storybook to include all files that end in .story.js
 * located in the src directory (and its sub-directories).
 */
import { configure } from '@storybook/react';
import './init';

const contexts = [
  // @see https://webpack.js.org/guides/dependency-management/#require-context.
  require.context('../../src', true, /\.story.js$/),
];
const requireAll = requireContexts =>
  requireContexts.forEach(requireContext =>
    requireContext.keys().map(requireContext)
  );
const loadStories = () => {
  requireAll(contexts);
};

configure(loadStories, module);

3. web.config.js

const webpack = require('webpack');

module.exports = {
  name: 'client',
  target: 'web',
  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    },
  },
  // Determines how the different types of modules within our project
  // will be treated by webpack.
  module: {
    // Rules for loaders, parser options, etc.
    rules: [
      // Rule for processing .js files: use babel-loader.
      {
        // Match .js files but not .test.js (test) files.
        test: /^(?!.*\.test\.js$).*\.js$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      }
    ],
  },

  plugins: [
    // Define some globals that the application can use later on.
    new webpack.DefinePlugin({
      APP_VERSION: JSON.stringify('1.0.0'),
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
      BUILD_ENV: JSON.stringify('local'),
    }),
    // Polyfill Promise and fetch when needed.
    new webpack.ProvidePlugin({
      Promise: 'bv-ui-core/lib/polyfills/promise',
      fetch: 'bv-ui-core/lib/polyfills/fetch/fetch',
    }),
  ],
  devtool: 'source-map',
};

4. .babelrc

{
  "plugins": [
    "emotion",
    "transform-object-assign",
    "transform-object-rest-spread",
    ["transform-react-jsx", { "pragma":"h" }],
    ["transform-runtime", { 
      "polyfill": false, 
      "regenerator": true, 
      "helpers": false 
    }]
  ],
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
      }
    ],
    "react"
  ]
}

compatibility with other tools inactive question / support

Source

guptar8jan

Most helpful comment

@mikefinazzo I don't remember the details, but it ended being an issue with webconfig. On build, storybook was trying to use prod config(or something like that). I had to make sure the webconfig is reconfigured correctly when build code is run:

const webpack = require('webpack');

module.exports = storybookBaseConfig => {
  storybookBaseConfig.resolve.alias = {
    react: 'preact-compat',
    'react-dom': 'preact-compat',
    'create-react-class': 'preact-compat/lib/create-react-class',
  };

  let fixed_plugins = [
    new webpack.ProvidePlugin({
      Promise: 'bv-ui-core/lib/polyfills/promise',
      fetch: 'bv-ui-core/lib/polyfills/fetch/fetch',
    }),
  ];
  storybookBaseConfig.plugins.forEach(plugin => {
    if (plugin.definitions) {
      plugin.definitions['NODE_ENV'] = JSON.stringify('development');
      plugin.definitions['BUILD_ENV'] = JSON.stringify('local');
      plugin.definitions['APP_VERSION'] = JSON.stringify('1.0.0');
      fixed_plugins.push(plugin);
      return;
    }
    // exclude plugins that specify uglifyOptions
    if (!plugin.options || !plugin.options.uglifyOptions) {
      fixed_plugins.push(plugin);
    }
  });
  storybookBaseConfig.plugins = fixed_plugins;
  storybookBaseConfig.devtool = 'source-map';

  // Return the altered config
  return storybookBaseConfig;
};

guptar8jan on 7 Jun 2018

👍2

All 13 comments

you are using preact instead of react. I wonder if that compatibility alias is missing anything.

danielduan on 28 Feb 2018

thanks danielduan. Alias is defined in webpack config. All these configs are working locally, the issue seem to be with the build assets.
resolve: { alias: { react: 'preact-compat', 'react-dom': 'preact-compat', }, },

guptar8jan on 28 Feb 2018

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] on 24 Mar 2018

Preact isn't something we officially support, but it'd be nice to fix this bug if you have some time to dig into our configs. I suspect that our static build webpack config isn't importing those aliases correctly.

danielduan on 24 Mar 2018

stale[bot] on 14 Apr 2018

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 14 May 2018

@danielduan - I'm currently having this same issue - is there any update on officially supporting Preact? Thanks!

mikefinazzo on 7 Jun 2018

@guptar8jan were you able to figure out a way around your issue?

mikefinazzo on 7 Jun 2018

const webpack = require('webpack');

module.exports = storybookBaseConfig => {
  storybookBaseConfig.resolve.alias = {
    react: 'preact-compat',
    'react-dom': 'preact-compat',
    'create-react-class': 'preact-compat/lib/create-react-class',
  };

  let fixed_plugins = [
    new webpack.ProvidePlugin({
      Promise: 'bv-ui-core/lib/polyfills/promise',
      fetch: 'bv-ui-core/lib/polyfills/fetch/fetch',
    }),
  ];
  storybookBaseConfig.plugins.forEach(plugin => {
    if (plugin.definitions) {
      plugin.definitions['NODE_ENV'] = JSON.stringify('development');
      plugin.definitions['BUILD_ENV'] = JSON.stringify('local');
      plugin.definitions['APP_VERSION'] = JSON.stringify('1.0.0');
      fixed_plugins.push(plugin);
      return;
    }
    // exclude plugins that specify uglifyOptions
    if (!plugin.options || !plugin.options.uglifyOptions) {
      fixed_plugins.push(plugin);
    }
  });
  storybookBaseConfig.plugins = fixed_plugins;
  storybookBaseConfig.devtool = 'source-map';

  // Return the altered config
  return storybookBaseConfig;
};

guptar8jan on 7 Jun 2018

👍2

@guptar8jan thanks, but that's still not helping our case unfortunately. Can you check your commit history to see if that was the only file you updated? Do you know what version of Storybook / npm / webpack you are using?

mikefinazzo on 7 Jun 2018

@mikefinazzo I am not finding anything relevant, is the config pointing correctly(-c [config-folder])?

"storybook-publish": "build-storybook -c ./.storybook -o storybook_built"

dependencies:

{
"name": "review_display",
"version": "0.0.31",
"description": "Review Display Application",
"main": "index.js",
"scripts": {
"analyze": "webpack --config webpack/prod.config.js --profile --json > dist/prod.json && webpack-bundle-analyzer dist/prod.json",
"build-local": "webpack --config webpack/local.config.js",
"build-qa": "webpack --config webpack/qa.config.js",
"build-prod": "webpack --config webpack/prod.config.js",
"fresh-install": "git fetch bv && git rebase bv/master && rm -rf node_modules/ && npm install && npm run test",
"lint": "eslint **/*.js",
"lint-staged": "lint-staged --config ./configs/.lintstagedrc",
"postinstall": "mkdir -p dist",
"precommit": "npm run lint-staged",
"preinstall": "rm -f package-lock.json",
"prepush": "npm run test",
"publish": "bv-loader-utils-publish",
"serve-app": "webpack-dev-server --config webpack/local.config.js --https --port 4043 --cert ~/.bv/loader.crt --key ~/.bv/loader.key",
"serve-loader": "bv-loader-utils-serve https://localhost:4043/bundle.js --page=pdp --client=testcustomer-firebird-smoke",
"start": "npm run storybook",
"storybook": "start-storybook -p 1318 -c ./configs/.storybook",
"test": "jest --coverage --config ./configs/jest/jest.config.json",
"storybook-publish": "rm -rf storybook_build/* && build-storybook -c ./configs/.storybook -o storybook_built && ./storybook/publish.sh"
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/bazaarvoice/review-display.git"
},
"author": "Bazaarvoice SWAT Team <[email protected]>",
"license": "SEE LICENSE IN LICENSE.md",
"homepage": "https://github.com/bazaarvoice/review-display#readme",
"devDependencies": {
"@bv/bv-js-utils": "^2.1.1",
"@bv/bv-loader-utils": "^1.3.0",
"@bv/bvjs-apps-components": "github:KikoRamos/bvjs-apps-components#swat-3068",
"@storybook/react": "^3.3.8",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-emotion": "^8.0.12",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.12",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"emotion": "^8.0.12",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.4.0",
"husky": "^0.14.3",
"ignore-loader": "^0.1.2",
"jest": "^21.2.1",
"lint-staged": "^5.0.0",
"lodash": "^4.17.4",
"preact": "^8.2.7",
"preact-compat": "^3.17.0",
"preact-context-provider": "^1.0.0",
"preact-emotion": "^8.0.12",
"preact-redux": "^2.0.3",
"preact-render-spy": "^1.2.1",
"prettier": "^1.10.2",
"prop-types": "^15.6.0",
"redux-thunk": "^2.2.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.9.1",
"webpack-bundle-analyzer": "^2.9.2",
"webpack-dev-server": "^2.10.1"
}
}

guptar8jan on 7 Jun 2018

@mikefinazzo I also recall, that I did some debugging on storybook build code. I was able to print the webpack configuration that storybook code was using on build. From that I was able to determine that webpack config was wrong, and supplying my own config overwrites made it work.

guptar8jan on 7 Jun 2018

I follow @guptar8jan way and it worked. We had to use a specific webpack.config to make it work :

// ./.storybook/webpack.config.js
module.exports = (config) => { // <-- this config is the default one provided by storybook
  config.resolve.alias = {
    react: 'preact-compat',
    'react-dom': 'preact-compat',
    'create-react-class': 'preact-compat/lib/create-react-class',
  };

  // It seems that alias works poorly when UglifyJsPlugin and NODE_ENV is production
  config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin');
  config.plugins
  .filter(plugin => plugin.constructor.name === 'DefinePlugin')
  .forEach(plugin => {
      plugin.definitions.NODE_ENV = 'development';
  });
  return config;
};