Babel-preset-expo Error after upgrading to V31

[reggie3]

I’m getting the following error that is resulting in a failure to build the JavaScript bundlde after upgrading the V31:

C:\Users\Development\Project\mobile\node_modules\expo\AppEntry.js: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\Development\Project\mobile\node_modules\babel-preset-expo\index.js

I’m using expo-cli v 2.2.5
I have a fresh install of the Android Client on a One Plus 5

I also have a .babelrc file with the following contents:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

Any idea what could be causing the problem? It seems to originate from AppEntry.js in the expo package.

[gerardo15]

I just had this issue, to solve it do the following.

1- remove .babelrc file
2- add to devDependencies “babel-preset-expo”: “^5.0.0”

3- create new file babel.config.js in root and place the following code

module.exports = function(api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
    };
};

4- remove node_modules and yarn install

Working.

[reggie3]

@gerardo15

“babel-preset-expo”: “^5.0.0”

Thanks for the guidance. When I tried it, I received the following errors

[17:28:36] C:\Users\Development\Project\mobile\node_modules\babel-plugin-module-resolver\lib\index.js:88
[17:28:36]       })[1];
[17:28:36]         ^
[17:28:36]
[17:28:36] TypeError: Cannot read property '1' of undefined
[17:28:36]     at Plugin.manipulateOptions (C:\Users\Development\Project\mobile\node_modules\babel-plugin-module-resolver\lib\index.js:88:9)
[17:28:36]     at normalizeOptions (C:\Users\Development\Project\mobile\node_modules\@babel\core\lib\transformation\normalize-opts.js:59:16)
[17:28:36]     at runSync (C:\Users\Development\Project\mobile\node_modules\@babel\core\lib\transformation\index.js:44:86)
[17:28:36]     at transformSync (C:\Users\Development\Project\mobile\node_modules\@babel\core\lib\transform.js:43:38)
[17:28:36]     at Object.transform (C:\Users\Development\Project\mobile\node_modules\@babel\core\lib\transform.js:22:38)
[17:28:36]     at compile (C:\Users\Development\Project\mobile\node_modules\@babel\register\lib\node.js:73:20)
[17:28:36]     at compileHook (C:\Users\Development\Project\mobile\node_modules\@babel\register\lib\node.js:102:12)
[17:28:36]     at Module._compile (C:\Users\Development\Project\mobile\node_modules\pirates\lib\index.js:77:29)
[17:28:36]     at Module._extensions..js (module.js:663:10)
[17:28:36]     at Object.newLoader [as .js] 
[17:28:36] Metro Bundler process exited with code 1
[17:28:36] Set EXPO_DEBUG=true in your env to view the stack trace.(C:\Users\Development\Project\mobile\node_modules\pirates\lib\index.js:88:7)

It appears to be related to this chunk of code in index.js of babel-plugin-module-resolver

exports.default = function (_ref) {
  var t = _ref.types;
  return {
    manipulateOptions: function manipulateOptions(babelOptions) {
      var _this = this;

/************ ERROR HAPPENS AT THIS LINE ********************/
// the .find method is not finding what it expects
      var findPluginOptions = babelOptions.plugins.find(function (plugin) {
        return plugin[0] === _this;
      })[1];
      findPluginOptions = manipulatePluginOptions(findPluginOptions);

      this.customCWD = findPluginOptions.cwd;
    },
    pre: function pre(file) {
      var customCWD = this.plugin.customCWD;

      if (customCWD === 'babelrc') {
        var startPath = file.opts.filename === 'unknown' ? './' : file.opts.filename;

        var _findBabelConfig$sync = _findBabelConfig2.default.sync(startPath),
            babelFile = _findBabelConfig$sync.file;

        customCWD = babelFile ? _path2.default.dirname(babelFile) : null;
      }

      this.moduleResolverCWD = customCWD || process.cwd();
    },


    visitor: {
      CallExpression: {
        exit: function exit(nodePath, state) {
          if (nodePath.node.seen) {
            return;
          }

          (0, _require2.default)(t, nodePath, mapModule, state, this.moduleResolverCWD);
          (0, _jest2.default)(t, nodePath, mapModule, state, this.moduleResolverCWD);
          (0, _systemImport2.default)(t, nodePath, mapModule, state, this.moduleResolverCWD);

          // eslint-disable-next-line no-param-reassign
          nodePath.node.seen = true;
        }
      },
      ImportDeclaration: {
        exit: function exit(nodePath, state) {
          (0, _import2.default)(t, nodePath, mapModule, state, this.moduleResolverCWD);
        }
      }
    }
  };
};

Any idea what might be causing it?

[reggie3]

It seems like upgrading babel-plugin-module-resolver to version 3.1.1 solved that problem.

yarn add babel-plugin-module-resolver@latest worked for me

[mobilelast]

I made a much less drastic change than mentioned above. Made one change to .babelrc.

Good discussion on Stackoverflow ==> ios - react native app - getting error app.js cannot read property 'filename' of undefined - Stack Overflow with my answer.

[shuffgy]

that helped me after updating from SDK30 to 31. Thank you @mobilelast