After adding "cordova-plugin-advanced-http", "ionic cordova run android" starts giving error

Question

ionic cordova run/build android works fine until I added the plugin cordova-plugin-advanced-http, the error stated as follows:

An unhandled exception occurred: D:\Projects\MyApp\myAppTest\www\plugins\cordova-plugin-advanced-http\www\helpers.js: Unexpected reserved word 'interface' (9:6)

   7 |   var validResponseTypes = ['text','arraybuffer', 'blob'];
   8 | 
>  9 |   var interface = {
     |       ^
  10 |     b64EncodeUnicode: b64EncodeUnicode,
  11 |     checkSerializer: checkSerializer,
  12 |     checkSSLCertMode: checkSSLCertMode,

The log file looks as under:

at Parser.raise (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:6325:17) at Parser.checkReservedWord (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9556:12) at Parser.parseIdentifierName (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9525:12) at Parser.parseIdentifier (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9499:23) at Parser.parseBindingAtom (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:7931:17) at Parser.parseVarId (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10501:20) at Parser.parseVar (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10477:12) at Parser.parseVarStatement (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10299:10) at Parser.parseStatementContent (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9896:21) at Parser.parseStatement (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9829:17) at Parser.parseBlockOrModuleBlockBody (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10405:25) at Parser.parseBlockBody (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10392:10) at Parser.parseBlock (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10376:10) at Parser.parseFunctionBody (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9424:24) at Parser.parseFunctionBodyAndFinish (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:9394:10) at withTopicForbiddingContext (D:\Projects\MyApp\myAppTest\node_modules@babel\parser\lib\index.js:10535:12)

I have seen the helper.js file under the specified location, it actually contains the word interface that is causing the problem as interface is the reserved word.

I have tried all the things that includes deleting node_modules and reinstalling them, before running the build command I have deleted plugins and platforms folders, but none of these worked for me.

As soon as I remove the cordova-plugin-advanced-http plugin, ionic cordova run/build starts building the project correctly

Answer 1

The problem is that interface is a future reserved word:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Future_reserved_keywords

Ultimately, it's a bug. The cordova-plugin-advanced-http developers weren't expecting this to be pushed through babel with a strict enough setting that it applies this restriction.

It seems that you have two options:

• Get the developers to refactor that variable name / make your own custom compilation of that package with the refactor
• Look into your babel settings and find out a way to set a less strict transpilation setting

For the second option, I have found some interesting discussion of it by searching for babel parser reserved word interface rather than trying to search anything Ionic or Cordova related. I'm not sure exactly what the setting you would need to change is called though.

From doing some research though, it seems that you can add a plugin to your .babelrc file which will automatically rename variables that use reserved words:

• @babel/plugin-transform-reserved-words · Babel

The recommended usage of it says install with:

npm install --save-dev @babel/plugin-transform-reserved-words

And then add to your .babelrc plugins section:

{
  "plugins": ["@babel/plugin-transform-reserved-words"]
}