React Storefront
|

Migrating from v5 to v6

Upgrade to Babel 7

  • Globally install the babel-upgrade npm package
  • Within the project root, run babel-upgrade --write
  • This will update dependencies for you within your package.json
  • Run npm install

Remove .babelrc

Delete the .babelrc file in the root of your app:

rm .babelrc

Add a babel.config.js

In react-storefront 6, you define your own babel config. In the root of your project create a file called babel.config.js with the following contents:

module.exports = function (api) {
  const modules = api.env().match(/client/) ? false : 'commonjs'
  api.cache(true)

  return {
    "presets": [
      ["@babel/env", {
        "targets": {
          "browsers": "> 1%"
        },
        "useBuiltIns": "usage",
        "forceAllTransforms": true,
        "modules": modules
      }],
      "@babel/react"
    ],
    "env": {
      "development-server": {
        "plugins": ['react-storefront']
      },
      "production-server": {
        "plugins": ['react-storefront']
      }
    },
    "plugins": [
      ["@babel/plugin-transform-runtime", {
        "regenerator": true
      }],
      "@babel/plugin-transform-async-to-generator",
      ["@babel/plugin-proposal-decorators", {
        "legacy": true
      }],
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-dynamic-import",
      "universal-import"
    ]
  }
}

Add the AMP transform to scripts/index.js

To ensure that pages pass AMP validation, update your scripts/index.js file to:

console.error = console.warn = console.log;

const index = require('react-storefront-moov-xdn').default
const { transformAmpHtml } = require('react-storefront-extensions/amp')

require('../src/analytics')

module.exports = function() {
  index({
    theme: require('../src/theme').default,
    model: require('../src/AppModel').default,
    App: require('../src/App').default,
    router: require('../src/routes').default,
    blob: env.blob || require('../src/blob.dev'),
    transform: transformAmpHtml
  })
}

Update other dependencies

  • npm i --save moov_rewriter@^4.0.1 moov_stdlib@^2.6.33
  • npm i --save-dev @material-ui/core@^3.8.1 @material-ui/icons@^3.0.2 mobx-state-tree@^3.10.0 moov_builder@^4.0.0-alpha.1 moovsdk@^7.1.4 webpack@^4.0.0 react-storefront@^6.0.0 react-storefront-moov-xdn@^6.0.0 react-storefront-extensions@^6.0.0 babel-plugin-react-storefront@^6.0.0 babel-plugin-universal-import@^3.1.2 react-universal-component@^3.0.3 mst-middlewares@^3.10.0

Upgrade to MobX State Tree v3

Official Changelog

TL;DR Migration Changes

  • types.identifier(types.number)types.identifierNumber
  • types.identifier() and types.identifier(types.string)types.identifier
  • types.frozentypes.frozen()
  • types.maybe(x)types.maybeNull(x)

Allow Legacy Decorators in ESLint

If you used create-react-storefront to create your app, it probably uses the legacy decorator syntax. You'll need to add the following to your .eslintrc to allow that:

parserOptions: {
  ecmaFeatures: {
    legacyDecorators: true
  }
}

Find/Replace

Globally replace the following:

  • react-storefront/platform => react-storefront-moov-xdn
  • react-storefront/amp/withAmp => react-storefront-extensions/amp/withAmp

Miscellaneous Module Not Found Errors

We've seen some sites encounter various errors when starting up to one or more modules not being found. This generally happens when NPM fails to install all dependencies properly, and is more common when upgrading many modules at once. Often the way to remedy this is to:

rm -rf node_modules
rm package-lock.json
npm install

When in doubt, have a look at the dependencies in react-storefront-boilerplate.