How to enable prop-types in production for a React Storybook for the Docs addon

Question

By default prop-types do not run in production for a react app. I realize this is a good thing to improve performance. However, we have a Storybook that we have built and are deploying it to a static site. Storybook has an addon called Docs that detects the prop-types for components and creates a table of the prop-types for easy to read documentation.

When running the storybook locally, everything works perfectly. The prop-types are detected and this table is generated.

SpinningLoader.propTypes = {
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

However, since prop-types are disabled in production by default. They cannot be detected when the storybook is deployed to a static site.

Is there a way to enable prop-types in production? Or some other workaround?

Answer 1

It's a little difficult to know without seeing more of your setup. If you're building it with the default storybook commands without and additional configuration it should "just work"...as far as I can tell.

As mentioned in a comment, Storybook has a specific build command you can add to your package.json to export it as a static app:

"scripts": {
  "build-storybook": "build-storybook -c .storybook -o .out"
}

If you're using that command and it's still not working, are you using any custom webpack/build workflow, and can you post those as well?

I've built a minimal repository for reference, which may be helpful in comparing your setup. Besides the packages in package.json it's really only 3 files; Storybook config, a React component, and a Component Story:

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: ['@storybook/addon-docs'],
};

src/components/message/message.js

import React from 'react'
import PropTypes from 'prop-types'

const Message = function Message({ text, color }) {
  return (<div style={{ color }}>{text}</div>)
}

Message.propTypes = {
  text: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired,
}

export default Message

src/components/message/message.stories.js

import React from 'react'
import Message from './message'

export default { title: 'Message', component: Message }

export const withText = () => <Message text="Hello World" color="green" />

If I run the build-storybook command, cd .out, and then npx live-server, I see the static-built storybook site, with my Message component, and the 'Docs' tab that includes the prop-types:

Full repository for reference

https://github.com/BenjaminWFox/react-storybook