Does gatsby remove proptypes by default?

user_7168196 0
Viewed 1274

I'm working in a new project with gatsby and reading about how to remove proptypes in production I found this: https://github.com/gatsbyjs/gatsby/pull/14987 and my question how this works (if it works to my code and not just to the core of gatsby), is by default? or I should do something in order to remove all the proptypes in my code?

After run gatsby build && gatsby serve the proptypes are still there, I also tried to add a custom .babelrc and work directly with this plugin without results https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

gatsby reactjs javascript
2 Answers

Short answer: yes, PropTypes are removed by default.

TLTR

React/Gatsby applications works perfectly with PropTypes. The issue described is an open debate about if in production builds, these PropTypes should be removed since the code should be coherent, robust and, valid in development environment before it's deployed or build in the production environment.

If you assume that your code in development must be valid and PropType-friendly you can infer either that you can omit the PropType validation in production environment to reduce the bandwidth and improve the build/deploy times since the validation and review is done under development.

So, by default, your PropTypes will be removed in production build.

You don't need to add any extra configuration since, by default, Gatsby uses this .babelrc structure:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining",],
  "presets": [
    [
      "babel-preset-gatsby", //here your are adding the preset
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

And as you can see in this GitHub pull-request and in babel-preset-gatsby dependencies the package is added in the default preset.

The changes added in this package only affects the core of your project, not the dependencies in /node_modules.

What are you seeing is a DefaultProps, that are a default value is for some reason (CMS issues for example) that props are not received by the React component and avoids the code break by providing a default value.

Summarizing:

  • By default, your PropTypes will be removed in the production environment if you are using a default .babelrc integration.
  • Your node_modules dependencies won't be affected by this addition of the Gatsby Babel preset.
  • What are you seeing are DefaultProps, a way to avoid code-breaking while using PropTypes or data fetching issues, especially if they are required.
user_55853710

I just tried to reproduce your problem and it works for me. I followed these steps:

  1. Create new Gatsby site: npx gatsby new gatsby-site
  2. Build site: npm run build
  3. Run site: npm run serve

For example in the Header component propTypes are defined as the following:

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

When inspecting the finished site, you only see defaultProps, not propTypes which is correct

var r = n("q1tI")
  , o = n.n(r)
  , i = n("Wbzz")
  , a = function(e) {
    var t = e.siteTitle;
    return o.a.createElement("header", {
        style: {
            background: "rebeccapurple",
            marginBottom: "1.45rem"
        }
    }, o.a.createElement("div", {
        style: {
            margin: "0 auto",
            maxWidth: 960,
            padding: "1.45rem 1.0875rem"
        }
    }, o.a.createElement("h1", {
        style: {
            margin: 0
        }
    }, o.a.createElement(i.Link, {
        to: "/",
        style: {
            color: "white",
            textDecoration: "none"
        }
    }, t))))
};
a.defaultProps = {
    siteTitle: ""
};
var c = a;

You can also verify by setting siteTitle to PropTypes.number

Header.propTypes = {
  siteTitle: PropTypes.number,
}

When running in development using npm run develop you will see a warning in your console

Failed prop type: Invalid prop `siteTitle` of type `string` supplied to `Header`, expected `number`.

You won't see this in production when running npm run build && npm run serve

Note: propTypes and defaultProps is something different.

Have you also checked your Gatsby version? Maybe you are running on an older version

I've tried using these versions (latest at the time of this post)

"dependencies": {
    "gatsby": "^2.24.26",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-manifest": "^2.4.21",
    "gatsby-plugin-offline": "^3.2.21",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-sharp": "^2.6.24",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-transformer-sharp": "^2.5.12",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },
user_32158560
Related