Flow Enums correctly parsed but not transformed

user_603393 0
Viewed 32

In my React app, I'm trying to migrate from my "old school" JS enums to Flow Enums: https://flow.org/en/docs/enums/

(I think) I've done everything listed here: https://flow.org/en/docs/enums/enabling-enums/

eslint and flow check are both happy (zero error) and the enums work as expected when I type code.

But when I start my app, they are not transformed and I get this:

ERROR in ./src/types.js
Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: C:\foo\src\types.js: Unexpected token, expected "{" (16:7)

  14 | |};
  15 |
> 16 | export enum FooEnum {
     |        ^
  17 |   On,
  18 |   Off,
  19 |   Default
    at instantiate (C:\foo\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\foo\node_modules\@babel\parser\lib\index.js:366:12)
    at FlowParserMixin.raise (C:\foo\node_modules\@babel\parser\lib\index.js:3453:19)
    at FlowParserMixin.unexpected (C:\foo\node_modules\@babel\parser\lib\index.js:3491:16)
    at FlowParserMixin.parseExport (C:\foo\node_modules\@babel\parser\lib\index.js:16044:16)
    at FlowParserMixin.parseExport (C:\foo\node_modules\@babel\parser\lib\index.js:6170:24)
    at FlowParserMixin.parseStatementContent (C:\foo\node_modules\@babel\parser\lib\index.js:14893:27)
    at FlowParserMixin.parseStatement (C:\foo\node_modules\@babel\parser\lib\index.js:14777:17)
    at FlowParserMixin.parseStatement (C:\foo\node_modules\@babel\parser\lib\index.js:5951:24)
    at FlowParserMixin.parseBlockOrModuleBlockBody (C:\foo\node_modules\@babel\parser\lib\index.js:15420:25)

Package-wise, all of them are in their latest version and I've installed:

My Babel config is:

  "babel": {
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      [
        "@babel/plugin-syntax-flow",
        {
          "enums": true
        }
      ],
      "babel-plugin-transform-flow-enums"
    ],
    "presets": [
      "@babel/preset-env",
      "@babel/preset-flow",
      "@babel/preset-react"
    ]
  },

Also, calling Babel from a command line correctly transforms the enum. I'm using this command:

npx babel src/types.js

What could I have missed?

babeljs flowtype
1 Answers

So, after struggling for hours, I eventually found out that react-app-rewired was messing up with my Babel plugins.

I ended up installing customize-cra, which allowed me to explicitely use my Babel config:

const {useBabelRc, override} = require('customize-cra');

module.exports = override(
   useBabelRc()
);
user_6033930
Related