Migrate to gatsby v2

[Scot3004]

As you see version 2 of gatsby was released https://www.gatsbyjs.org/blog/2018-09-17-gatsby-v2/

[greglobinski]

@Scot3004 I'm aware of that :)

[leoj3n]

I've started work on getting this to build with Gatsby v2:

https://github.com/leoj3n/gatsby-starter-personal-blog (git diff: https://github.com/leoj3n/gatsby-starter-personal-blog/commit/3057627615864354af3850e1746d407a8481ad5d)

Result of npm install:

npm WARN deprecated npm-registry-fetch@1.1.1: this version has a breaking change. use 1.1.0 or upgrade to latest
npm WARN deprecated babel-plugin-transform-unicode-property-regex@2.0.5: Use @babel/plugin-proposal-unicode-property-regex instead.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> fsevents@1.2.4 install /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/fsevents
> node install

[fsevents] Success: "/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> sharp@0.20.8 install /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/leoj/.npm/_libvips/libvips-8.6.1-darwin-x64.tar.gz

> sharp@0.20.5 install /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/sharp-cli/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.6.1/libvips-8.6.1-darwin-x64.tar.gz

> jss@9.8.7 postinstall /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/jss
> node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"

Love JSS? You can now support us on open collective:
 > https://opencollective.com/jss/donate

> pngquant-bin@5.0.0 postinstall /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully

> cwebp-bin@4.0.0 postinstall /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/cwebp-bin
> node lib/install.js

  ✔ cwebp pre-build test passed successfully
npm WARN eslint-config-react-app@3.0.0-next.66cc7a90 requires a peer of eslint@^4.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-backend-bitbucket@2.0.7 requires a peer of netlify-cms-lib-auth@2.0.0-alpha.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-backend-bitbucket@2.0.7 requires a peer of netlify-cms-lib-util@2.0.0-alpha.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-backend-bitbucket@2.0.7 requires a peer of netlify-cms-ui-default@2.0.0-alpha.0 but none is installed. You must install peer dependencies yourself.
npm WARN slate-edit-list@0.11.3 requires a peer of slate@^0.32.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-instantsearch-native@5.2.3 requires a peer of react-native@>= 0.32.0 but none is installed. You must install peer dependencies yourself.

added 2987 packages in 88.893s

Result of gatsby develop:

success open and validate gatsby-config — 0.020 s
success load plugins — 0.520 s
success onPreInit — 1.585 s
success delete html and css files from previous builds — 0.010 s
success initialize cache — 0.008 s
success copy gatsby files — 0.038 s
success onPreBootstrap — 0.008 s
success source and transform nodes — 0.492 s
success building schema — 0.512 s
success createPages — 0.001 s
success createPagesStatefully — 0.028 s
success onPreExtractQueries — 0.004 s
success update schema — 0.255 s
warning The GraphQL query in the non-page component "/Users/leoj/src/mcp/gatsby-starter-personal-blog/src/layouts/index.js" will not be run.
warning The GraphQL query in the non-page component "/Users/leoj/src/mcp/gatsby-starter-personal-blog/src/templates/PageTemplate.js" will not be run.
warning The GraphQL query in the non-page component "/Users/leoj/src/mcp/gatsby-starter-personal-blog/src/templates/PostTemplate.js" will not be run.
Exported queries are only executed for Page components. Instead of an exported
query, either co-locate a GraphQL fragment and compose that fragment into the
query (or other fragment) of the top-level page that renders this component, or
use a <StaticQuery> in this component. For more info on fragments and
composition, see http://graphql.org/learn/queries/#fragments and for more
information on <StaticQuery>, see https://next.gatsbyjs.org/docs/static-query
success extract queries from components — 0.250 s
success run graphql queries — 0.057 s — 4/4 81.83 queries/second
success write out page data — 0.015 s
success write out redirect data — 0.003 s
success onPostBootstrap — 0.003 s

info bootstrap finished - 8.101 s

here ./.cache/develop-static-entry.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
    at validatePlugins (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/parser/lib/index.js:10421:13)
    at getParser (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/parser/lib/index.js:10478:5)
    at parse (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/parser/lib/index.js:10449:20)
    at parser (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/core/lib/transformation/normalize-file.js:170:34)
    at normalizeFile (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/core/lib/transformation/normalize-file.js:138:11)
    at runSync (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/core/lib/transformation/index.js:44:43)
    at runAsync (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  WebpackError: ./.cache/develop-static-entry.js

  - bootstrap:33 runSync
    lib/webpack/bootstrap:33:1

  - bootstrap:24 runAsync
    lib/webpack/bootstrap:24:1

So, I was able to get it as far as onPostBootstrap. The migration guide helped me get it to that point:

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/

I've also added the very basics for Netlify CMS, as I intend to integrate Netlify in my fork.

The legacy decorators error more or less has me stumped though. I tried searching around and found for example this thread:

https://github.com/babel/babel/issues/8562#issuecomment-417208018

But it was all a little too over my head, having never used Gatsby before I have no knowledge of the internals.

[Scot3004]

I think would be better attack just one thing now, and when you done with Gatsby v2 migration add netlify

[eddiebeazer]

How is this going? I planned on doing both of these myself towards the end of this month. Won’t waste the time if I know someone else is working on it as well.

[justsml]

I started upgrading, but feel like I've barely made any progress 😇

[justsml]

Check out my progress: https://github.com/greglobinski/gatsby-starter-personal-blog/pull/73

[chmac]

@greglobinski What's your position on upgrading this to v2? Some of the other v1 starters seem unmaintained so we've pushed a couple of v2 versions to the starter showcase. Looks like you're still maintaining this starter, so keen to hear your thoughts before we look at releasing a v2 version.

[greglobinski]

@chmac I will upgrade the starter soon.

[justsml]

Hi @greglobinski - In my upgrade attempt, I probably missed a few things as I'm learning about the internals of Gatsby as I move through it.

Please let me know if my branch/PR is any help.

Thanks again for all your work!!!

[mateuszmatyszkowicz]

@greglobinski do you encountered any issue during upgrading to gatsby v2? I have done it, but I encountered issue related to the index page, where the styles are rerendered after every refresh page, what is interesting on the other pages itsn't occured.

[greglobinski]

Upgrade to v2 is on the way, I tried to make it today, but I had not enough time. Seems that everything works, but there is still some work to do. If you are interested take a look at version-2 branch. I will finish next weekend.

[greglobinski]

I'm sorry for the delay, I'm working on it, seams that there is one thing to refactor. I upgraded Material UI to v3 and have to updated the code of the menus, besides that looks that everything works. Some more patience please :)

[justsml]

@greglobinski Is the v2 branch current? (Or could you use any help at this point?)

[hendra-go]

Hello All, I just test the latest version of the v2 branch yesterday and i think i achieved good result so far. With some adjusments:

1. Upgrade package.json using npm-check-updates so each dependecies updated to its latest version. ncu -u -a and then do yarn install again

2. React-popper with it latest version has some changes that need to be fixed, but i just remove react-popper because we can use Popper component from @material-ui/core

3. PostComments.js has some error that need to be fixed but i am not planning to use comment form for my blog anyway, so i just delete reference to PostComments.js in src/components/Post/PostFooter.js

That's all, it should be enough (at least in my case)

[hendra-go]

Ups i forget to mention that you too need to adjust Popper in CategoryFilter.js, FontSetter.js and TopMenu.js, it shouldn't be too hard, you can read about it here: Popper API

[greglobinski]

@khairendra Great, are you willing to send a PR to the branch?

[hendra-go]

@greglobinski sorry greg, kinda busy right at the moment, yesterday i just made raw adjustment, so the quality of the code is not good enough. Hopefully next week, after christmas.

[hendra-go]

I have created a pull request #82 Most of them seems to work fine at the moment.

Hopefully it helps.

Happy holiday all.

[greglobinski]

Thank you very much @khairendra great work :1st_place_medal: without your help the branch would still stay unfinished.

I'm sorry for the delay. I merged the PR, and will switch the branches soon (probably on weekend)

Thank you again! :+1: :heart:

[hendra-go]

Thank you very much @khairendra great work 🥇 without your help the branch would still stay unfinished.

I'm sorry for the delay. I merged the PR, and will switch the branches soon (probably on weekend)

Thank you again! 👍 ❤️

Thanks for accepting and merging my PR but dont switch the branches yet @greglobinski . There is still a problem in production build, related to this JSS tags get dropped when using Material UI with Gatsby

[hendra-go]

Refactor layout to Layout Component without using gatsby-plugin-layout seems fix production build problem.

I have created a PR https://github.com/greglobinski/gatsby-starter-personal-blog/pull/83

[hendra-go]

Refactor layout to Layout Component without using gatsby-plugin-layout seems fix production build problem.

I have created a PR #83

Close this PR, too early, has problem regarding redux

[hendra-go]

Gatsby Team decision to remove the special layout component in v2 has cause some problem on migrating from v1 to v2.

Try this PR https://github.com/greglobinski/gatsby-starter-personal-blog/pull/84

I decided to try it different way. I async import Navigator, ActionBar, InfoBar and InfoBox component using "react-async-component"

Seems working, even in production build. And additional advantage, hot-reload is fully working in development mode. But i am not sure about other problem, do you think another problem will arise if we use this approach ?

[ccapasso01]

@hendra-go @greglobinski , just curious if this is close to v2? Really love this theme and would love to use it.

[hendra-go]

@hendra-go @greglobinski , just curious if this is close to v2? Really love this theme and would love to use it.

Me too, i really love this gatsby starter. IMHO there are couple things to make this starter works in Gv2

1. Using my PR. I think the reason @greglobinski reluctant to merge my PR is because my solution seems and sounds "Hackish" but actually it works. or...
2. Waiting for react-jss version 10, probably it will fix bugs. or...
3. Replace jss with other such as styled-component.

What do you think @greglobinski ?

[maxscience]

@hendra-go @greglobinski any updates on this and Disqus support? 👍 it looks like react-jss is at version 10 now.

[justsml]

I managed to get disqus working @maxscience ... I'll find relevant links.

I think this might be out of scope for this issue, but is different comment options something there's interest in?

[maxscience]

@justsml totally! I’d also be interested in adding support for the Netlify-cms plugin

[hendra-go]

@maxscience react-jss v10 is still in alpha stage. I have tried to build again using latest gatsby and with all of its latest dependencies but the bug is still there.

I currently on process developing my blog using modified version of this starter with latest gatsby v2.1.13.

I can make it works by doing these steps: Disclaimer !!! : i am actually not a real programmer, only a script kiddies so bear with me if my solution is not ideal, but hey it works and untill now i haven't found any performance issue regarding this approach. At least in my case.

first: Using react-async-component, asynchronously import Navigator, ActionsBar, InfoBar and InfoBox in src/layout/index.js something like this:

import { asyncComponent } from "react-async-component";

const Navigator = asyncComponent({
  resolve: () => import("../components/Navigator")
});

const ActionsBar = asyncComponent({
  resolve: () => import("../components/ActionsBar")
});

const InfoBar = asyncComponent({
  resolve: () => import("../components/InfoBar")
});

const InfoBox = asyncComponent({
  resolve: () => import("../components/InfoBox"),
  // eslint-disable-next-line react/display-name
  LoadingComponent: () => (
    <Loading
      overrides={{ width: `${theme.info.sizes.width}px`, height: "100vh", right: "auto" }}
      afterRight={true}
    />
  )
});

second: You also need to asynchronously import Main, in all page tempates and individual pages that needs it (src/templates/PageTemplate.js, src/templates/PostTemplate.js, src/pages/contact.js, etc) something like this:

// in PostTemplate.js
import { asyncComponent } from "react-async-component";

const Main = asyncComponent({
  resolve: () => import("../components/Main")
});

that's all... try to build again, it should be work... hopefully.

[hendra-go]

@maxscience but if you still want to use diqus, you can check my answer here #85

[ccapasso01]

@hendra-go - do you have a working fork/version of this working that we could clone or fork to mess with and deploy ourselves?

[hendra-go]

@ccapasso01 : try my fork here https://github.com/hendra-go/gatsby-starter-personal-blog

And i will cancel my current PR, because i just realize that the second step i mentioned in https://github.com/greglobinski/gatsby-starter-personal-blog/issues/64#issuecomment-465861659 is not included in the PR, and will not create new PR about this because it is not ideal solution.

But if you still want to use Gatsby v2 for this starter, you can use my fork above. It build fine with latest gatsby v2.1.13, i also update all dependencies using their latest stable version and working ok so far.

[ccapasso01]

@hendra-go: Thanks. I cloned your fork. I've got most of the dependencies working so far. This is the only issue right now:

Chriss-MacBook-Pro:collabchris-2 ccapasso$ gatsby develop success open and validate gatsby-configs — 0.014 s warning Plugin gatsby-plugin-react-next is not compatible with your gatsby version 2.1.13 - It requires gatsby@^1.0.0 error This plugin file is using both CommonJS and ES6 module systems together which we don't support. You'll need to edit the file to use just one or the other.

[hendra-go]

@ccapasso01 just remove "gatsby-plugin-react-next": "^1.0.11" from your package.json and then run yarn install again or just run yarn remove gatsby-plugin-react-next and then remove gatsby-plugin-react-next from your gatsby-config.js. Gatsby v2 is already compatible with React 16

Just a little advice, if you are upgrading your current blog that use this starter to gatsby v2 it is ok to use this fork but if you are trying to build fresh new blog, i think it is better to wait for @greglobinski to transform / rewrite this starter as mentioned here: #89

to @greglobinski i think it is better to close this issue and reference it to #89

[ccapasso01]

Thanks Hendra, but I don’t believe that fixes it. That was just a warning. The error is referencing the following:

error This plugin file is using both CommonJS and ES6 module systems together which we don't support. You'll need to edit the file to use just one or the other.

plugin: /Users/ccapasso/Gatsby/collabchris-2/gatsby-browser.js

Looking at this it looks like an error with mixing ES6 and CommonJS. I went in and edited all of the imports to const for that file and one other. On develop, it still fails. Clearly I’m missing something or not doing it right as you mentioned you were able to successfully build yours based off your fork and updated to v2.

[hendra-go]

@ccapasso01 can i see your gatsby-browser.js file?

[ccapasso01]

It was the same that you have in your fork on Github. Can’t grab the code at the moment

On Sun, Feb 24, 2019 at 10:00 PM -0500, "Hendra Gotara" notifications@github.com<mailto:notifications@github.com> wrote:

@ccapasso01https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_ccapasso01&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=pqtZMkXg2M72iMd5H_YtiBK7cpYUp2d9MTAY8HIa-Ck&m=vHKxgHoDvu3aBaj5yOoCyXpc20sMurvvo6pMHmLwbm0&s=0QBYshdJnZ6tGUK8ZkobEW6b4szriFBa5AokFAVLEHY&e= can i see your gatsby-browser.js file?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_greglobinski_gatsby-2Dstarter-2Dpersonal-2Dblog_issues_64-23issuecomment-2D466855382&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=pqtZMkXg2M72iMd5H_YtiBK7cpYUp2d9MTAY8HIa-Ck&m=vHKxgHoDvu3aBaj5yOoCyXpc20sMurvvo6pMHmLwbm0&s=EidHKUPLlFfZscvGK7bfrxx7NKR4uRrp8PBIgMRpJUs&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AdB1ZSqhdilbJ1syz6rAOOJlLFCrSzY1ks5vQ1GogaJpZM4W0-5FQK&d=DwMCaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=pqtZMkXg2M72iMd5H_YtiBK7cpYUp2d9MTAY8HIa-Ck&m=vHKxgHoDvu3aBaj5yOoCyXpc20sMurvvo6pMHmLwbm0&s=uOgJ2ZZmRn1drnTi3wKLdG_a0hCxtfE4yORYc8NKyJ0&e=.

[hendra-go]

hmm... i can build fine here... Try again to clone my fork locally in new directory, and try build again.

I commented out gatsby-plugin-algolia, maybe that's the one causing your problem

[ccapasso01]

I can build fine right after cloning. But when updating to gataby 2.1.13 that is when the error starts.

On Sun, Feb 24, 2019 at 10:17 PM -0500, "Hendra Gotara" notifications@github.com<mailto:notifications@github.com> wrote:

hmm... i can build fine here... Try again to clone my fork locally in new directory, and try build again.

I commented out gatsby-plugin-algolia, maybe that's the one causing your problem

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_greglobinski_gatsby-2Dstarter-2Dpersonal-2Dblog_issues_64-23issuecomment-2D466858125&d=DwMFaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=pqtZMkXg2M72iMd5H_YtiBK7cpYUp2d9MTAY8HIa-Ck&m=DtVpIla2UtyPFFXFtexnQ8EXT3rsby21Vsl1hqzQct4&s=98CU-YFuBz0ogWPiCwEanUJbO-dZwmu6w5lXLtmmisk&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AdB1ZVnt0fHXy0LXrkVe9CGiZcsvtnBlks5vQ1WugaJpZM4W0-5FQK&d=DwMFaQ&c=euGZstcaTDllvimEN8b7jXrwqOf-v5A_CdpgnVfiiMM&r=pqtZMkXg2M72iMd5H_YtiBK7cpYUp2d9MTAY8HIa-Ck&m=DtVpIla2UtyPFFXFtexnQ8EXT3rsby21Vsl1hqzQct4&s=p6FQnw7aDqDeTJapsGLLBdos8pBz7ARAF1iGeyeMcAQ&e=.

[hendra-go]

@ccapasso01 are you sure ? i just updated package.json to use gatsby v2.1.17 and i can still build without problem

[gemfarmer]

Has there been any recent progress on this? I love this theme (so much great work. Thank you 🙏thank you 🙏thank you), but I'm reluctant to give it a go as a v1 starter.

[colemerrick]

@gemfarmer I'm using v2.6.5 and it's working alright.

[PrateekArora03]

@greglobinski why you stop doing work on this theme

[jamezrin]

@prarora98 are you paying him to ask that?