bundling failed: SyntaxError

[anchengjian]

error info

error: bundling failed: SyntaxError: ~/simple/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Unexpected token (20:12)

  18 | const RCTActivityIndicatorViewNativeComponent = require('./RCTActivityIndicatorViewNativeComponent');
  19 | 
> 20 | import type {NativeComponent} from '../../Renderer/shims/ReactNative';
     |             ^
  21 | import type {ViewProps} from '../View/ViewPropTypes';
  22 | 
  23 | const RCTActivityIndicator =
    at Object.raise (~/simple/node_modules/@babel/parser/lib/index.js:6387:17)
    at Object.unexpected (~/simple/node_modules/@babel/parser/lib/index.js:7704:16)
    at Object.expectContextual (~/simple/node_modules/@babel/parser/lib/index.js:7670:41)
    at Object.parseImport (~/simple/node_modules/@babel/parser/lib/index.js:11239:12)
    at Object.parseImport (~/simple/node_modules/@babel/parser/lib/index.js:5325:18)
    at Object.parseStatementContent (~/simple/node_modules/@babel/parser/lib/index.js:9998:27)
    at Object.parseStatementContent (~/simple/node_modules/@babel/parser/lib/index.js:5381:18)
    at Object.parseStatement (~/simple/node_modules/@babel/parser/lib/index.js:9900:17)
    at Object.parseBlockOrModuleBlockBody (~/simple/node_modules/@babel/parser/lib/index.js:10476:25)
    at Object.parseBlockBody (~/simple/node_modules/@babel/parser/lib/index.js:10463:10)

version info

"babel-plugin-const-enum": "^0.0.2",

and .babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset",
    ["@babel/preset-typescript", {
      "allowNamespaces": true
    }]
  ],
  "plugins": [
    ["const-enum", { "transform": "removeConsta" }]
  ]
}

When I remove const-enum, everything is ok 😢😢😢

[dosentmatter]

@anchengjian, if you look at the code, it should fail and say 'transform option must be removeConst|constObject'. I'm not sure why that error isn't popping up for you. But your code shows removeConsta (extra trailing a) and not removeConst. Try removing the a and see what happens.

[dosentmatter]

@anchengjian, did you resolve your issue? I don't know what you mean by the 😕emoji. Have you tried correcting your removeConsta typo? If you have no other comments, I am going to close this issue.

[anchengjian]

I checked my local code and there were no spelling errors. I just misspelled it in this issue.

[anchengjian]

I create a project，that can show this error

AwesomeProject.zip

# install
$ yarn

# start
$ yarn start --reset-cache

# Trigger compilation
$ curl http://127.0.0.1:8081/index.bundle?platform=ios

[dosentmatter]

@anchengjian. Thanks for the example project. #3 also has an error with React Native and your project really helped since I am not familiar with React Native.

I found out that both your app and an ejected app created with expo will transpile certain react-native files inside node_modules. We both noticed that it fails on node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js.

You are using metro-react-native-babel-preset and an expo app uses babel-preset-expo, which also uses metro-react-native-babel-preset.

I noticed that metro-react-native-babel-preset source detects whether source is TS or TSX using overrides and test. See overrides and test.

I found out that expo and react-native just uses tsconfig.json with tsc to type check and not to compile. react-native uses babel for TS compilation. See:
https://docs.expo.io/versions/latest/guides/typescript/#confguring-the-typescript-compiler
https://facebook.github.io/react-native/docs/0.60/typescript#how-typescript-and-react-native-works

I noticed that @babel/preset-typescript also does some checking to determine if the extension is .ts or .tsx. However, notice that the plugin itself doesn't check the file extension. Plugins seem to only have code to transform code and doesn't concern itself with the extension.

The reason you are getting the error is that babel-plugin-const-enum (this plugin) and plugins in general can't detect the file type. So my plugin is being run on react-native flow code.

A quick solution would be to do the following:

#.babelrc
{
  "presets": ["module:metro-react-native-babel-preset"],
  "overrides": [
    {
      "test": ["*.ts", "*.tsx"],
      "plugins": [
        [
          "const-enum",
          {
            "transform": "removeConst"
          }
        ]
      ]
    }
  ]
}

Or if you are using babel.config.js, you can optionally use regex (although the array option works the same):

#babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  overrides: [
    {
      test: /\.tsx?$/,
      plugins: [
        [
          'const-enum',
          {
            transform: 'removeConst',
          },
        ],
      ],
    },
  ],
};

In my spare time, maybe I will create a preset to do this for you automatically. Maybe called babel-preset-const-enum or something.
UPDATE: babel-preset-const-enum

Let me know if this resolves your issue, and I can close this.

[dosentmatter]

See https://github.com/dosentmatter/babel-plugin-const-enum/tree/0.0.3#syntaxerror