Upgrade to Expo 31/Babel 7?

I have an Expo app running with version 30, and I’m trying to upgrade it to 31.
Babel is giving me headaches with snapshot testing, where the snapshot fails because it previously contained a component and now it’s a basic component.

I’d rather not update my snapshots to have them full of generic <Component>.

I previously had a .babelrc file that looked like that

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

Now I’ve deleted that file and created a babel.config.js that looks like this

  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'module:react-native-dotenv'],
    plugins: [
      '@babel/transform-arrow-functions',
      '@babel/transform-react-jsx-source'
    ]
  };
};

package.json looks like this:

  "name": "mixfitapp",
  "version": "1.2.0",
  "private": true,
  "main": "./node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "eject": "expo eject",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "test": "jest",
    "storybook": "storybook start -p 7007",
    "test:coverage": "jest --coverage && open coverage/lcov-report/index.html"
  },
  "jest": {
    "preset": "jest-expo",
    "setupFiles": [
      "./tests/setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.js"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test"
    }
  },
  "dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "date-fns": "^1.29.0",
    "downshift": "^2.2.3",
    "expo": "^31.0.4",
    "expo-analytics": "^1.0.7",
    "expo-camera": "^1.1.0",
    "expo-permissions": "^1.1.0",
    "formik": "^1.3.0",
    "intl": "^1.2.5",
    "lodash": "^4.17.11",
    "prop-types": "^15.6.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-btr": "^1.0.13",
    "react-native-circular-progress": "^1.0.1",
    "react-native-credit-card-input": "^0.4.1",
    "react-native-datepicker": "^1.7.2",
    "react-native-dotenv": "^0.2.0",
    "react-native-elements": "^0.19.1",
    "react-native-keyboard-aware-scroll-view": "^0.7.2",
    "react-native-modal-dropdown": "^0.6.2",
    "react-navigation": "^2.18.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.0",
    "stripe-client": "^1.1.5",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@dump247/storybook-state": "^1.5.2",
    "@storybook/addon-actions": "^3.4.11",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react-native": "^3.4.10",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-preset-expo": "5",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "eslint": "^4.0.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.11.1",
    "husky": "^1.0.0-rc.15",
    "identity-obj-proxy": "^3.0.0",
    "jest-expo": "^31.0.0",
    "jest-fetch-mock": "^1.6.6",
    "prettier": "^1.14.2",
    "react-dom": "^16.3.1",
    "react-test-renderer": "16.3.1",
    "redux-devtools-extension": "^2.13.5",
    "redux-mock-store": "^1.5.3"
  }
}

I installed it with yarn, not npm.

What other information would you need to help me?

2 Likes

This seems to be related to https://github.com/facebook/react-native/issues/21937

remove everything from .babelrc and place
{ “presets”: [ “babel-preset-expo” ] }

thanks for your answer @ashishtaskme!
Unfortunately this opens another set of errors:

[...]/node_modules/react-native/jest/mockComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (20:24):

I don’t want to go and mess with the babel config file of that module if I can avoid it…

I’m also unable to build after upgrading from 30 to 31.

My .babelrc looks the same as yours in terms of only having babel-preset-expo and react-native-dotenv as presets.

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

I also deleted the .babelrc file and then added the babel.config.js file. It looks the same as yours.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'module:react-native-dotenv'],
    plugins: [
      '@babel/transform-arrow-functions',
      '@babel/transform-react-jsx-source'
      ]
  };
};

However, I end up with an error in
./node_modules/@babel/core/lib/config/config-descriptors.js:178

which complains

throw new Error(`Plugin/Preset files are not allowed to export objects, only functions. In ${filepath}`);

Here’s the full stack trace cause I know that can help.

[15:45:13] /Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:178
[15:45:13]     throw new Error(`Plugin/Preset files are not allowed to export objects, only functions. In ${filepath}`);
[15:45:13]     ^
[15:45:13]
[15:45:13] Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/Lois/Desktop/app-mobile/node_modules/react-native/Libraries/react-native/react-native-implementation.js
[15:45:13]     at createDescriptor (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
[15:45:13]     at items.map (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
[15:45:13]     at Array.map (<anonymous>)
[15:45:13]     at createDescriptors (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
[15:45:13]     at createPresetDescriptors (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
[15:45:13]     at presets (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
[15:45:13]     at mergeChainOpts (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-chain.js:320:26)
[15:45:13]     at /Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-chain.js:283:7
[15:45:13]     at buildRootChain (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/config-chain.js:90:20)
[15:45:13]     at loadPrivatePartialConfig (/Users/Lois/Desktop/app-mobile/node_modules/@babel/core/lib/config/partial.js:85:55)

Any help would be appreciated guys. Thanks in advance

1 Like

I’m also facing this issue. I’ve tried everything :confused:

Finally, I’ve solved. I have this in my package.json:

"devDependencies": {
    "babel-plugin-transform-remove-console": "6.9.4",
    "babel-preset-expo": "^5.0.0"
  }

And this in my .babelrc

{
    "presets": ["babel-preset-expo"],
  
    "env": {
      "production": {
        "plugins": [
          "transform-remove-console"
        ]
      }
    }
  }

Try to:

  1. Update .babelrc and package.json

  2. Delete node_modules folder

  3. Run yarn or npm

  4. Run expo clearing cache using expo start -c

1 Like

Ciao @matteo-pennisi,

Very happy that you solved it, and thanks for taking the time to post your solution here!
Merry Christmas :slight_smile:

1 Like

trying your solution

i have failed with this advice

2 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.