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?

Astronaut

Are you exporting as described in storybook.js.org/docs/basics/exporting-storybook ? – Ingressive

Also have a look at github.com/storybookjs/storybook/issues/8140 – Ingressive

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

Cottony

I followed all the steps for this. Previously our build-storybook command just had -s public for the flags. Even locally (npx live-server), the prop tables still say 'unknown' for the types, so I have not fixed it yet, but this was a very good detailed answer. Thank you. Next, I'm checking my webpack config in my .storybook directory. Edit: I should say the yarn storybook command still shows the types properly. Only npx live-server is acting just like the problem I reported when running locally. – Astronaut

@KevinVandy are you able to post your relevant Storybook & Webpack config files? If you're doing anything specific with converting modules (ES6->CommonJS, etc...), polyfills, minification, or anything that significantly changes the structure of the code for the production build that may cause them not to be picked up by the Docs plugin. – Cottony

Answer 2

1. A workaround would be to manually specify the information you want to display in the table for each component using ArgTypes: https://storybook.js.org/docs/react/api/argtypes. Then you can continue with the documentation with that approach.

2. Another option would be to complete and publish the storybook while the app is still in development. This way you will have the prop-types detected and the table generated for you, then you can later build your app for production.

This is how you would declare the argTypes in the first option

// Button.stories.js

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    label: {
      description: 'overwritten description',
      table: {
        type: { 
            summary: 'something short', 
            detail: 'something really really long' 
        },
       defaultValue: { summary: 'default-label' }
      },
      control: {
        type: 'text',
      },
    },
  },
};

This is the result

Montsaintmichel

Answer 3

In case anyone runs into this issue again, setting NODE_ENV to development, as suggested here https://github.com/storybookjs/storybook/issues/8140#issuecomment-621314565, solved our problems

The issue was ultimately caused by including the transform-react-remove-prop-types plugin in our babel.config.js production environment. Without propTypes to read, there's nothing to display.

Debora

Answer 4

'propTypes' is a useful feature through which we can validate typechecking of props in React but it also unnecessarily creates runtime overhead. It downgrades the apps performance.

That is the reason it is NOT available in production.

It has been made to help developers especially in a team, to find out if there is any wrong type of props been passed to the component, while writing code during the development environment. It does not add any extra functionality. It will also add extra lines of code unnecessarily.

By keeping it in the production flow it will defeat the whole purpose.

Whether you also use Flow/typescript for typechecking, there purpose are all same. refer: https://reactjs.org/docs/typechecking-with-proptypes.html

Now, your issue is similar to the below known issue, kindly refer below: https://github.com/storybookjs/storybook/issues/1661

Mansur

As I stated in the posted question, I understand that in normal react apps, we don't want propTypes to run in production. As I've been working through this, I guess the better question is how to deploy a site in "development" mode, rather than "production" so that propTypes can run on the static site for this storybook. – Astronaut

No problem @KevinVandy, however, as mentioned previously did you go through the links: github.com/storybookjs/storybook/issues/8140 , this is a known Bug and this issue is still open as work is still in progress. Still, you can also try the links: github.com/storybookjs/storybook/issues/8435 and github.com/storybookjs/storybook/pull/8581 , which might solve your problem. Otherwise, you have to wait till the Bug is removed. Cheers! – Mansur