Decorators don't work with custom-react-scripts

Question

I read this article: https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a

I followed its instruction and here is my code: https://github.com/franva/custom-react-scripts

I want to use decorators feature for mobx integration without ejecting, but it just doesn't work even REACT_APP_DECORATORS = true;

Here is the error message:

./src/components/ChatRoom.jsx Syntax error: F:/temp/Playground/my-app/src/components/ChatRoom.jsx: Unexpected token (5:0)

3 | import {observer} from 'mobx-react';

4 |

5 | @observer | ^
6 | class ChatRoom extends Component { 7 | 8 | @observable

Answer 1

The @decorator is ES7 syntax, you need the transform-decorators plugin to transpile it with babel :

https://babeljs.io/docs/plugins/transform-decorators/

Edit: I just saw you want to use it without ejecting, maybe you have to turn REACT_APP_BABEL_STAGE_0=true too.

Answer 2

The problem is in my local computer environment.

I tried my code on a different computer and it works.