Migrating to Gatsby 2

ReactGatsby

I have been using Gatsby for about 6 months, and I am quite happy with it.

Recently Version 2 was released. It has quite a few improvements. It is faster, smaller, and it brings major library updates:

The official documentation has a comprehensive migration guide, which is what I followed. I had to spend some extra effort to get everything running again, though.

Removing old plugins

I had some plugins that either stopped working or that I actually did not use at all, so I did some cleanup. gatsby-plugin-manifest, gatsby-plugin-google-analytics, gatsby-plugin-react-next are out. Conversely, I added gatsby-plugin-layout, as Gatsby 2 has changed how the main layout works, and I did not want to change too much at once.

Missing favicon

I had my favicon under static/img, which stopped working. Instead I went with another plugin gatsby-plugin-favicon, which works basically out of the box.

Global styles

I mostly use CSS Modules for styling, but I have some global styles that I use for convenience and to style emergence. It seems that Gatsby 2 is stricter about how assets are imported, as these stylings were not being applied anymore. I had to extract them from a component to a proper global file.

Babel 7 and Jest

Babel 7 and Jest do not play nice with each other, as many resources illustrate. Getting this to work without breaking the normal compilation process took me some time to figure out. In the end I am doing it through the Jest configuration.

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|svg|woff|woff2)$': '<rootDir>/__mocks__/fileMock.js',
    '^.*\\.s?css$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.jsx?$': './jest/transformer.js',
  },
  setupFiles: ['<rootDir>/setupTests.js'],
  testPathIgnorePatterns: ['/node_modules/', '<rootDir>/.cache/'],
  globals: {
    __PATH_PREFIX__: '',
  },
}

I am using a custom transformer that applies the new Babel presets, like this:

const config = {
  babelrc: false,
  presets: ['@babel/preset-env', '@babel/preset-react'],
}

module.exports = require('babel-jest').createTransformer(config)

I ended up having to install some extra dependencies:

yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

This made it work although it is a bit fragile. Trying to stop using graphql as a global gave me a lot of errors, for instance.

Up and running

And that is basically it, now the whole site runs on the most modern version of most packages, which is great. I am looking forward to use some of the new fancy features at some point.

Keep Reading