如何在生产中为 Docs 插件的 React Storybook 启用 prop-types

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

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 andpublish 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

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.

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