Imamudin Naseem
Imamudin Naseem

Reputation: 1702

How to use decorators in react server side rendered app?

I have an app(with SSR) running. Recently I tried adding decorator support. I have done the configuration and app runs perfectly fine when it runs in the browser (Because code running in browser is babel-transpiled).

However code(Component containing decorator) breaks when it is rendered on server-side - May be because, the code which is getting executed is not transpiled and node is not able to understand @ symbol.

It it throwing below error

   (node:1932) UnhandledPromiseRejectionWarning: SyntaxError: 
src/components/common/InputBox/InputBox.js: Unexpected token (8:0)

        import './InputBox.scss';
           7 |
        >  8 | @autobind
             | ^
           9 | class InputBox extends Component {
          10 |     constructor(props) {
          11 |         super(props);

How can I fix this?

Thanks

Upvotes: 0

Views: 88

Answers (1)

bonbonez
bonbonez

Reputation: 6848

Seems like you haven't set up support for decorators. That means that your code is not transformed, and node (which runs your server script) don't know how to process @foo kind of code. Decorators at 2nd stage (see https://tc39.github.io/proposal-decorators/ ) and not part of the language. If you use babel to transform your code, add corresponding plugin (@babel/plugin-proposal-decorators).

Upvotes: 1

Related Questions