Babel plugin-proposal-decorators not working as expected

Question

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.

Answer 1

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.