Problem Upgrading to SDK 31 (Cannot Find Babel Plugin 'transform-react-jsx-source')


#1

Essentially, the error seems to come down to this…

/node_modules/expo/AppEntry.js: Cannot find module ‘babel-plugin-transform-react-jsx-source’

Causing a 500 server response.

After following the upgrade instructions in the expo article on medium, I ran yarn and got the following warnings and a detox related error which may be relevant, especially since it exited…but I’m not sure how to resolve nor am I sure how/why the detox postinstall script is being run.

I’ve tried wiping out the node_modules directory and stepping through the upgrade steps a couple times, but always with the same result.


#2

Apparently I needed to simplify my babel config


#3

Where did you find the information that suggested you simplify your babelrc? I attempted to do what you did but still got the same error, even after deleting my node modules, clearing cache, and re-installing via yarn. I ran
yarn add @babel/plugin-transform-react-jsx-source
and found my project working again…

My .babelrc now looks like this:

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

#4

Hmmm, that’s interesting because that broke my config. The fix I described above solved the problem described (for me), but broke my jest tests so further changes had to be made. My babel.config.js file now looks like this…

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

as always, YMMV


#5

it should look like this: https://github.com/expo/new-project-template/blob/master/babel.config.js

if you’re ever in doubt you can init a new project and check its babel config


#6

Thanks for weighing in, Brent. I’m out of my depths here and got some guidance from SWM on my config, but my current config matches your reference with added plugins. Is that good, bad, or ¯\_(ツ)_/¯ in your opinion?


#7

you shouldn’t need to add that plugin, it’s already included in the react-native babel preset which is a subset of the expo preset - https://github.com/facebook/metro/blob/28830458856217e85430acd0971e415723714ef8/packages/metro-react-native-babel-preset/src/configs/main.js#L74-L80


#8

I have the same problem
node_modules/expo/AppEntry.js: Cannot find module ‘babel-plugin-transform-react-jsx-source’


#9

you need to remove .babelrc and add babel.config.js like this: https://github.com/expo/universe/blob/20d3b211c1057fb7eb943220c9f05ac90c7ab34b/apps/expo-template-tabs/babel.config.js