Skip to main content

Migrating to React 17 + CRA 4

The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.

In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React. This goes well with the purpose of the FrontHub, as it increases the independence of each microfrontend and avoids conflict with different versions of React or other libraries.

Upgrade dependencies​

You will first need to update the dependencies to the latest version. If you want to do it interactively, you can use the command below at the root of the package:

yarn upgrade-interactive --latest

Or directly with the command:

yarn upgrade react react-dom react-scripts @resultadosdigitais/front-hub @resultadosdigitais/front-hub-commons --latest
caution

Since React is a primary dependency for the project, all other libs need to be updated and support version 17. In this case, make the update in small parts, with different pull requests, thus reducing the risk of making a big break.

Upgrade to the New JSX Transform​

Because the new JSX transform will automatically import the necessary react/jsx-runtime functions, React will no longer need to be in scope when you use JSX. This might lead to unused React imports in your code. It doesn’t hurt to keep them, but if you’d like to remove them, we recommend running a “codemod” script to remove them automatically:

npx react-codemod update-react-imports

Instructions to be followed:

  • On which files or directory should the codemods be applied? Choose the src directory of the package being updated. Example, if you run the command in package root, type ./src.
  • Which dialect of JavaScript do you use? When in doubt, choose JavaScript.
  • *Destructure namespace imports (import ) too? Yes!

ESLint​

It's necessary to disable the ESLint rule that requires React import, which is no longer needed:

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Since the script changes the code, formatting may be out of alignment with Prettier, but you can correct this using the command:

yarn prettier --write ./src

Testing​

There is no significant impact on testing, but here are some recommendations:

  • Make sure all libraries are up to date.
  • Remove the jest-environment-jsdom-fourteen env from the test script if you are using it.
  • Change from useMock to instanceMock if you are using it.