Quick-fix for enabling Decorators with Create-React-App without Ejecting

In my post about using MobX in ReactJS to enable runtime style changes, I Ejected the Create-React-App in order to configure Webpack to enable Decorators, which Im using together with MobX. I found out that I could Quick-fix this without Ejecting.

Disclaimer: Im using the latest Create-React-App version; time of writing, this is version “react-scripts”: “0.6.1”

First of all you need to “npm install babel-plugin-transform-decorators-legacy –save”

After that is done, find these to configuration files:

  1. node_modules/react-scripts/config/webpack.config.dev.js
  2. node_modules/react-scripts/config/webpack.config.prod.js

 

webpack-dev-prod-config

 

 

 

 

 

 

 

 

With those 2 files open you need to add this line plugins: [‘transform-decorators-legacy’ ]

Have a look at these screenshots to find out where you must put them.

In webpack.config.dev.js
dev-add-decorator

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In webpack.config.prod.js
prod-add-decorator

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

With those in place you should be able to use Decorators in your Create-React-App.

  • Jarle Friestad

    No, no, no just. Node modules are external packages and should not be modified and checked in with your code. What happens when you bump the version number of react-scripts? You overwrite your changes in node modules. You have 2 options:

    1) Eject the react app, and you can modify the webpack configs afterwards
    2) If you still want to run the app as a create react app, then use a alternative react scripts implementation e.g https://www.npmjs.com/package/custom-react-scripts

    • bjeld

      I Agree, hence the title “Quick-fix”.

    • Martin Bjeld

      I Agree, Hence the title “Quick-Fix” ;)

  • Inessa Atnovember

    Thank you!
    You teach me, where i can find react-create-app webpack configs!
    and how to win decorators!