Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Removing propTypes on Production

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

The whole purpose of propTypes is to help us during development: they don't add any actual functionality to our code. And, for that reason, some people remove the propTypes code when they build their assets for production. It's not a big deal, it just makes your final JS files a little bit smaller.

This is totally optional, but let's do it real quick! Google for "babel-plugin-transform-react-remove-prop-types". Wow! First prize for longest name!

This is a Babel plugin that can remove propTypes. Copy the library name, find your terminal, and get it!

yarn add babel-plugin-transform-react-remove-prop-types --dev

While that's downloading, go back to its docs. Usually, this is configured via a .babelrc file: this activates the plugin on the production environment. Except, because we're using Webpack Encore, it handles the Babel configuration for us.

Tip

If you downloaded the code, the webpack.config.js file will now already have a configureBabel() method at the bottom. Add this between the first {} inside that call instead of adding a new configureBabel() call.

Fortunately, Encore gives us a hook to modify that config. Add .configureBabel() and pass this a function with one arg: call it babelConfig. Now, when Encore builds, it will create our Babel configuration, then call this function so we can modify it. We need to add a new env key, with this config below it. Copy the production, plugins part. Then, add babelConfig.env = and paste. This is safe because, if you logged the babelConfig object, you would see that Encore doesn't include an env key. So, we're not overriding anything.

... lines 1 - 3
Encore
... lines 5 - 29
.configureBabel((babelConfig) => {
babelConfig.env = {
"production": {
"plugins": ["transform-react-remove-prop-types"]
}
}
})
... lines 37 - 41

Oh wait, actually, I made a mistake! This totally won't work! That's because we can't rely on Babel to know whether or not we're creating our production build. Instead, use if Encore.isProduction(). Then, inside, add the plugin with babelConfig.plugins.push(), copy the plugin name, and paste!

... lines 1 - 29
.configureBabel((babelConfig) => {
if (Encore.isProduction()) {
babelConfig.plugins.push(
'transform-react-remove-prop-types'
);
}
})
... lines 37 - 41

Remove the stuff below. This is simpler anyways: if we're building for production, add this handy plugin.

We're not going to build for production right now, but to make sure we didn't break anything, go back to the terminal that runs encore, press Ctrl+C to stop it, then restart:

yarn run encore dev-server

And... no errors! Later, when we execute yarn run encore production, the prop types won't be there.

Leave a comment!

7
Login or Register to join the conversation

Hey guys,

I am getting a warning when using the latest libraries.
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

The only thing that works is adding this line to .configureBabel
babelConfig.presets[0][1].corejs = 2;

Is there a better way to handle this?

Reply

Hey Skylar

You can configure corejs version like this:

.configureBabel(function(babelConfig) {
// your babelConfig
}, {
corejs: 2 // or set useBuiltIns: false
});

hope it will help

Cheers!

Reply

Thank you for the help. But....

This is the error I get:

Running webpack ...

Error: Invalid option "corejs" passed to configureBabel(). Valid keys are exclude

:( The babel section of webpack.config.js looks like this:
.configureBabel((babelConfig) => {
if (Encore.isProduction()) { babelConfig.plugins.push('transform-react-remove-prop-types'); }
babelConfig.plugins.push('@babel/plugin-transform-spread');
babelConfig.plugins.push('babel-plugin-transform-class-properties');
},{
corejs: 2
})

Thanks for your help!!

Reply

Hey Skylar

Which version of @symfony/webpack-encore is installed? You can check this with

yarn list | grep encore

I think I provided newer example, and it should be used only with newer version of encore.

Cheers!

Reply

├─ @symfony/webpack-encore@0.21.1

Reply

with version your solution is the best as I see, if you upgrade to version 0.26, than you will be able to use my example.

Reply

Thank you for your help :)

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This course uses Symfony 4, but as this is a JavaScript course, all the concepts apply fine to Symfony 5. Have fun!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/doctrine-bundle": "^1.6", // 1.9.1
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.3
        "doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
        "doctrine/orm": "^2.5", // v2.7.2
        "friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
        "friendsofsymfony/user-bundle": "dev-master#4125505ba6eba82ddf944378a3d636081c06da0c", // dev-master
        "sensio/framework-extra-bundle": "^5.1", // v5.2.0
        "symfony/asset": "^4.0", // v4.1.4
        "symfony/console": "^4.0", // v4.1.4
        "symfony/flex": "^1.0", // v1.17.6
        "symfony/form": "^4.0", // v4.1.4
        "symfony/framework-bundle": "^4.0", // v4.1.4
        "symfony/lts": "^4@dev", // dev-master
        "symfony/monolog-bundle": "^3.1", // v3.3.0
        "symfony/polyfill-apcu": "^1.0", // v1.9.0
        "symfony/serializer-pack": "^1.0", // v1.0.1
        "symfony/swiftmailer-bundle": "^3.1", // v3.2.3
        "symfony/twig-bundle": "^4.0", // v4.1.4
        "symfony/validator": "^4.0", // v4.1.4
        "symfony/yaml": "^4.0", // v4.1.4
        "twig/twig": "2.10.*" // v2.10.0
    },
    "require-dev": {
        "symfony/debug-pack": "^1.0", // v1.0.6
        "symfony/dotenv": "^4.0", // v4.1.4
        "symfony/maker-bundle": "^1.5", // v1.5.0
        "symfony/phpunit-bridge": "^4.0", // v4.1.4
        "symfony/web-server-bundle": "^4.0" // v4.1.4
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": {
        "@babel/plugin-proposal-object-rest-spread": "^7.12.1" // 7.12.1
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.5
        "@symfony/webpack-encore": "^0.26.0", // 0.26.0
        "babel-plugin-transform-object-rest-spread": "^6.26.0", // 6.26.0
        "babel-plugin-transform-react-remove-prop-types": "^0.4.13", // 0.4.13
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.5.1
        "core-js": "2", // 1.2.7
        "eslint": "^4.19.1", // 4.19.1
        "eslint-plugin-react": "^7.8.2", // 7.8.2
        "font-awesome": "4", // 4.7.0
        "jquery": "^3.3.1", // 3.3.1
        "promise-polyfill": "^8.0.0", // 8.0.0
        "prop-types": "^15.6.1", // 15.6.1
        "react": "^16.3.2", // 16.4.0
        "react-dom": "^16.3.2", // 16.4.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.0", // 7.3.1
        "sweetalert2": "^7.11.0", // 7.22.0
        "uuid": "^3.2.1", // 3.4.0
        "webpack-notifier": "^1.5.1", // 1.6.0
        "whatwg-fetch": "^2.0.4" // 2.0.4
    }
}