Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate gatsby from v1 to v2 #75

Merged
merged 23 commits into from
Jan 25, 2020
Merged

Migrate gatsby from v1 to v2 #75

merged 23 commits into from
Jan 25, 2020

Conversation

kairstenfay
Copy link
Contributor

@kairstenfay kairstenfay commented Jan 10, 2020 •
edited by jameshadfield
Loading

Documentation

I'm following this guide for upgrading gatsby from v1 to v2.

Steps taken

Steps taken (all within static-site directory)

  1. Upgrade gatsby version with npm i gatsby@latest

  2. Upgrade gatsby-related packages

npm i gatsby-link@latest gatsby-plugin-catch-links@latest gatsby-plugin-feed@latest gatsby-plugin-google-analytics@latest gatsby-plugin-manifest@latest gatsby-plugin-nprogress@latest gatsby-plugin-offline@latest gatsby-plugin-react-helmet@latest gatsby-plugin-sharp@latest gatsby-plugin-sitemap@latest gatsby-plugin-styled-components@latest gatsby-plugin-twitter@latest gatsby-remark-autolink-headers@latest gatsby-remark-copy-linked-files@latest gatsby-remark-images@latest gatsby-remark-prismjs@latest gatsby-remark-responsive-iframe@latest gatsby-remark-smartypants@latest gatsby-source-filesystem@latest gatsby-transformer-remark@latest

  1. Install react with npm i react react-dom

  2. Install plugins' peer dependencies

npm install --save gatsby-plugin-react-helmet react-helmet gatsby-plugin-styled-components styled-components babel-plugin-styled-components
  1. Change modifyWebpackConfig to onCreateWebpackConfig.

edit (james 2020-01-15): see below for current status

@jameshadfield
Copy link
Member

@kairstenfay -- upgrade node & npm and this will work*. I resolved this by upgrading to versions 13.6.0 & 6.13.6 respectively, removing node_modules and the lock file, and reinstalling via npm i.

*There are other build errors, but these look like they are covered in the gatsby upgrade guide.

@tsibley tsibley temporarily deployed to nextstrain-s-migrate-ga-mo3ur3 January 10, 2020 06:53 Inactive
@kairstenfay
Copy link
Contributor Author

@kairstenfay -- upgrade node & npm and this will work*. I resolved this by upgrading to versions 13.6.0 & 6.13.6 respectively, removing node_modules and the lock file, and reinstalling via npm i.

*There are other build errors, but these look like they are covered in the gatsby upgrade guide.

Thanks, James. Upgrading to node v13 plus removing node_modules and package-lock.json worked for me.

@jameshadfield
Copy link
Member

jameshadfield commented Jan 14, 2020 •
edited
Loading

Update: The site now builds using gatsby v2 but there's heaps of broken functionality with only minor fixes still needed. Will add bugs as I test this out more.

Bugs to fix

  • The react warnings in the console using gatsby develop are due to react-helmet -- we can either wait for a fix or switch to react-helmet-async (or drop it, I'm not sure if it's needed for us)

  • src/html.jsx dynamically injects inline CSS in production mode only -- require("!raw-loader!../public/styles.css". This has existed since the first set up of gatsby & i'm not entirely sure what CSS it's pulling in. This syntax is broken in gatsby v2 (you just need to remove the !raw-loader I think) but the relative file doesn't exist (anymore). See https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#remove-inlined-css-in-htmljs

  • I had to disable the gatsby-plugin-catch-links as it was catching relative links which should got to auspice (e.g. the zika tile on the splash page) but modifying the link to go to a gatsby 404 (the server never saw the get request and so couldn't send to auspice). This plugin is generally problematic for us & needs attention.

  • loading /doesntexist doesn't result in a 404 page and the URL is updated when it shouldn't be. The 4040 is still there at /404

Misc

  • Squash commits / clean up git history according to team advice

@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 14, 2020 06:12 Inactive
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 14, 2020 06:22 Inactive
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 14, 2020 06:24 Inactive
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 14, 2020 06:31 Inactive
kairstenfay and others added 15 commits January 15, 2020 12:08
@kairstenfay @jameshadfield
static-site: Update gatsby dependencies
1e334c3 
Begin the process of migrating from gatsby v1 to v2.

I'm following the [steps documented
here](https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/).
@kairstenfay @jameshadfield
Install react
ee64e10 
`react` and `react-dom` are `peerDependencies` in v2.
@kairstenfay @jameshadfield
static-site: Install plugins' peer dependencies
642e401
@kairstenfay @jameshadfield
Install missing dependency
6006108
@kairstenfay @jameshadfield
Lock npm dependencies
9b8d770
@kairstenfay @jameshadfield
Change modifyWebpackConfig to onCreateWebpackConfig
bf730e9 
Part of migrating gatsby v1 to v2, per [the gatsby
documentation](https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#change-modifybabelrc-to-oncreatebabelconfig).
@jameshadfield
Remove gatsby-link package
6697dce 
`Link` is now imported from "gatsby"
@jameshadfield
Import graphql from gatsby
8cce59f 
As per the upgrading guide
@jameshadfield
Add babel-preset-gatsbyto babelrc
1b5bd8d 
This allows `gatsby develop` to work (previously we were getting an error during bundle generation). Note that the site is still not working, but does build without errors.
@jameshadfield
fix styled component errors. Site now builds.
ded9755
@jameshadfield
Rename boundActionCreators to actions
40c8daf 
as per v1-v2 upgrade guide
@jameshadfield
upgrade nodejs & npm
0738429 
We had a number of issues with upgrading gatsby that were fixed by using the latest node and npm versions
@jameshadfield
Fix (main) styling issues
6670128 
Followed the migration path outlined in https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#remove-or-refactor-layout-components
@jameshadfield
fix HTML nesting error
99e3fa8 
`div` cannot be a child of `p`
@jameshadfield
minor style fix
0a9393c 
reverts some of 2c5915a
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 14, 2020 23:08 Inactive
@jameshadfield
debug (should be squashed)
0d3dce5
@jameshadfield
disable gatsby-plugin-catch-links
6818b81 
This was catching relative links which should got to auspice (e.g. the zika tile on the splash page) but modifying the link to go to a gatsby 404 (the server never saw the get request and so couldn't send to auspice). This plugin is generally problematic for us & needs attention.
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 15, 2020 01:02 Inactive
@jameshadfield jameshadfield temporarily deployed to nextstrain-dev January 15, 2020 01:11 Inactive
@jameshadfield jameshadfield temporarily deployed to nextstrain-s-migrate-ga-2uizex January 15, 2020 03:19 Inactive
@jameshadfield jameshadfield mentioned this pull request Jan 15, 2020
Closed
@jameshadfield jameshadfield temporarily deployed to nextstrain-dev January 15, 2020 03:25 Inactive
@jameshadfield
Fix relative links which should go to server
55b1676 
We want certain relative links to go to the server (e.g. /login shouldn't be interpreted as a gatsby page, but go to the server which redirects as appropriate). This fixes the nav-bar to achieve the desired behavior with the new gatsby version.

x
@jameshadfield
[gatsby upgrade] fix matchPath in page creation
bbbd3b9 
See https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#change-client-paths-to-use-a-splat for more details.
@jameshadfield
Move users page to sections
431b191 
We want to create the users "page" via a `createPage` call so that we can use it /users/:username URLs. When this was located within the `/pages` directory gatsby automatically created a page at `/users` which loaded fine, but the `createPage` functionality was lost (i.e. /users/userName wouldn't load). By moving this file gatsby no longer automatically creates a URL for it and we get back our desired behaviour via `createPage`.
@jameshadfield jameshadfield temporarily deployed to nextstrain-dev January 15, 2020 04:15 Inactive
@trvrb
Copy link
Member

trvrb commented Jan 16, 2020

Awesome! I poked around the site for a little while and the only bug I was able to find was the 404 bug noted above.

@trvrb
Copy link
Member

trvrb commented Jan 21, 2020

I believe that Python 2.7 is no longer required for this Gatsby installation. Or that was my experience installing now on a system that lacks python2 command. I've updated the readme accordingly in the commit below, but please feel free to revert is this update was in error.

Generally, my install experience on this branch is much improved. Various Gatsby plugins had been giving me trouble before.

The only bug I've found is the 404 issue.

@trvrb trvrb merged commit d80405f into master Jan 25, 2020
@trvrb
Copy link
Member

trvrb commented Jan 25, 2020

I decided to merge this to ease development. I believe the only issue that needs resolving is the 404 not behaving as intended.

@trvrb trvrb deleted the migrate-gatsby-from-v1-to-v2 branch January 25, 2020 06:41
@jameshadfield jameshadfield mentioned this pull request Jan 28, 2020
Closed
@ivan-aksamentov ivan-aksamentov mentioned this pull request Jan 30, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@kairstenfay @jameshadfield @trvrb @tsibley