Menu
Menu Sheet Overlay
Search
Search Sheet

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: