Babel plugin-proposal-decorators not working as expected

I have added these two devDependencies in my package.json:

"@babel/plugin-proposal-class-properties": "^7.1.0",

"@babel/plugin-proposal-decorators": "^7.1.6",

In .babelrc a file I have added them as plugins:

{

    "presets": ["module:metro-react-native-babel-preset"],

    "plugins": [

        ["@babel/plugin-proposal-decorators", { "legacy": true}],

        ["@babel/plugin-proposal-class-properties", { "loose": true}]

    ]

}

I am using mobx so observable is the clean syntax, my file looks like this:

class AppStore {

  @observable username = ''

}



export default (new AppStore())

But it is always showing this error:

I think I have done it correctly but there is no way to detect whether babel plugins are loaded or not.

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

In babel sandbox babeljs.io/repl both plugins can't be loaded as well.

– Zydnar
Dec 7 '18 at 11:21

add a comment |

I have added these two devDependencies in my package.json:

"@babel/plugin-proposal-class-properties": "^7.1.0",

"@babel/plugin-proposal-decorators": "^7.1.6",

In .babelrc a file I have added them as plugins:

{

    "presets": ["module:metro-react-native-babel-preset"],

    "plugins": [

        ["@babel/plugin-proposal-decorators", { "legacy": true}],

        ["@babel/plugin-proposal-class-properties", { "loose": true}]

    ]

}

I am using mobx so observable is the clean syntax, my file looks like this:

class AppStore {

  @observable username = ''

}



export default (new AppStore())

But it is always showing this error:

I think I have done it correctly but there is no way to detect whether babel plugins are loaded or not.

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

In babel sandbox babeljs.io/repl both plugins can't be loaded as well.

– Zydnar
Dec 7 '18 at 11:21

add a comment |

I have added these two devDependencies in my package.json:

"@babel/plugin-proposal-class-properties": "^7.1.0",

"@babel/plugin-proposal-decorators": "^7.1.6",

In .babelrc a file I have added them as plugins:

{

    "presets": ["module:metro-react-native-babel-preset"],

    "plugins": [

        ["@babel/plugin-proposal-decorators", { "legacy": true}],

        ["@babel/plugin-proposal-class-properties", { "loose": true}]

    ]

}

I am using mobx so observable is the clean syntax, my file looks like this:

class AppStore {

  @observable username = ''

}



export default (new AppStore())

But it is always showing this error:

I think I have done it correctly but there is no way to detect whether babel plugins are loaded or not.

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

I have added these two devDependencies in my package.json:

"@babel/plugin-proposal-class-properties": "^7.1.0",

"@babel/plugin-proposal-decorators": "^7.1.6",

In .babelrc a file I have added them as plugins:

{

    "presets": ["module:metro-react-native-babel-preset"],

    "plugins": [

        ["@babel/plugin-proposal-decorators", { "legacy": true}],

        ["@babel/plugin-proposal-class-properties", { "loose": true}]

    ]

}

I am using mobx so observable is the clean syntax, my file looks like this:

class AppStore {

  @observable username = ''

}



export default (new AppStore())

But it is always showing this error:

I think I have done it correctly but there is no way to detect whether babel plugins are loaded or not.

javascript reactjs react-native babeljs babel

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

edited Dec 8 '18 at 12:50

Balthazar

30.4k106387

asked Nov 21 '18 at 10:00

aftershock

547

asked Nov 21 '18 at 10:00

aftershock

547

asked Nov 21 '18 at 10:00

aftershock

547

In babel sandbox babeljs.io/repl both plugins can't be loaded as well.

– Zydnar
Dec 7 '18 at 11:21

add a comment |

In babel sandbox babeljs.io/repl both plugins can't be loaded as well.

– Zydnar
Dec 7 '18 at 11:21

In babel sandbox babeljs.io/repl both plugins can't be loaded as well.

– Zydnar
Dec 7 '18 at 11:21

add a comment |

1 Answer
1

active

oldest

votes

+50

First, make sure that you are on the latest version of metro-react-native-babel-preset, they released a new minor 0.50.0 only 9 days ago.

If that didn't help, it's likely the problem comes from the fact that the metro-react-native-babel-preset already includes the class property plugin, and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin.

There has been a lot of discussion on this subject of ordering in babel, and although plugins are supposed to run before presets, it still would be a problem. Unfortunately PR #5735 to add plugin ordering capabilities is still a work in progress.

What you could do in the meantime could be to either fork your own metro-react-native-babel-preset and add the decorator plugin before the class property plugin at the place I pointed. You might also try to make your own babel preset including the two plugins in the right order and add it after the metro one, as presets are loaded in reverse order, last to first as seen here.

Also worth a try would be to start the packager using yarn start --reset-cache which might solve issues caused by a bad/outdated cache.

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409498%2fbabel-plugin-proposal-decorators-not-working-as-expected%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

+50

First, make sure that you are on the latest version of metro-react-native-babel-preset, they released a new minor 0.50.0 only 9 days ago.

Also worth a try would be to start the packager using yarn start --reset-cache which might solve issues caused by a bad/outdated cache.

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

add a comment |

+50

First, make sure that you are on the latest version of metro-react-native-babel-preset, they released a new minor 0.50.0 only 9 days ago.

Also worth a try would be to start the packager using yarn start --reset-cache which might solve issues caused by a bad/outdated cache.

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

add a comment |

+50

First, make sure that you are on the latest version of metro-react-native-babel-preset, they released a new minor 0.50.0 only 9 days ago.

Also worth a try would be to start the packager using yarn start --reset-cache which might solve issues caused by a bad/outdated cache.

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

First, make sure that you are on the latest version of metro-react-native-babel-preset, they released a new minor 0.50.0 only 9 days ago.

Also worth a try would be to start the packager using yarn start --reset-cache which might solve issues caused by a bad/outdated cache.

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

edited Dec 11 '18 at 16:18

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

answered Dec 8 '18 at 11:26

Balthazar

30.4k106387

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

add a comment |

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

"..and as you know the order of the plugins matter, you need to have the decorator run before the class property plugin" - THANK YOU! I've been banging my head against a wall for the last few hours trying to get decorators to work in my workspace and this was the issue 🙌

– goodforenergy
Dec 10 '18 at 1:15

@goodforenergy haha glad to have helped!

– Balthazar
Dec 10 '18 at 1:29

@Aperçu hello thanks for info. The way I solved was running yarn start instead of default metro bundler that appears when i type react-native run-ios I think it is better you can add that as answer so I can mark your answer as a solution?

– aftershock
Dec 11 '18 at 15:59

Because run-ios spawns the same start command, it's likely your issue was due to a bad cache rather than simply using yarn

– Balthazar
Dec 11 '18 at 16:15

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu