Menu
Menu Sheet Overlay
Search

Migration guide for React 16 upgrade

There are a lot big changes with React 16 that require you to upgrade certain packages as well as your code in order to support React 16 properly.

First, follow the Migration Guide For React 16 Upgrade to get your Progressive Web App up to date. This guide will cover the remaining upgrade path for your AMP project. The changes discussed here are based on Mobify’s experience upgrading AMP to React 16.

Update Jest’s Configuration

The first step is to add Jest's configuration to the package.json file. The update adds to moduleNameMapper the following:

"jest": {
  ...
  "moduleNameMapper": {
    ...
    "mobify-integration-manager/(.*)": "<rootDir>/node_modules/mobify-integration-manager/$1",
    "enzyme$": "<rootDir>/node_modules/enzyme/build"
  }
}

Update Project Dependencies

Next, you need to update your project's dependencies. You can do the following:

npm install node-sass@4.5.3 && npm install babel-plugin-syntax-dynamic-import@6.18.0

Delete Unneeded Function

The last thing you need to do is delete the whitelistAttributes function from app/main.js, jest-setup.js, and anywhere else it’s used. It is no longer needed. This will allow you to use custom attributes in AMP.

Wrap-up

In this guide you learned how to migrate your React 15.x AMP project to React 16.x. The basic steps involved are to:

  • Update Jest’s configuration
  • Update project dependencies
  • Delete unneeded functions (whitelistAttributes)

Feedback

Was this page helpful?