gatsby-starter-personal-blog icon indicating copy to clipboard operation
gatsby-starter-personal-blog copied to clipboard

Published 20 hours ago • verified publisher icon greglobinski

Migrate to gatsby v2

Open Scot3004 opened this issue 6 years ago • 44 comments

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

Scot3004 avatar Sep 21 '18 23:09 Scot3004

@Scot3004 I'm aware of that :)

greglobinski avatar Sep 22 '18 20:09 greglobinski

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 [email protected]: this version has a breaking change. use 1.1.0 or upgrade to latest
npm WARN deprecated [email protected]: Use @babel/plugin-proposal-unicode-property-regex instead.
npm WARN deprecated [email protected]: 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 [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> [email protected] 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

> [email protected] 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

> [email protected] 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

> [email protected] 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

> [email protected] postinstall /Users/leoj/src/mcp/gatsby-starter-personal-blog/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully

> [email protected] 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 [email protected] requires a peer of eslint@^4.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of slate@^0.32.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] 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.

leoj3n avatar Sep 22 '18 20:09 leoj3n

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

Scot3004 avatar Sep 24 '18 12:09 Scot3004

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.

eddiebeazer avatar Oct 12 '18 23:10 eddiebeazer

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

justsml avatar Oct 16 '18 02:10 justsml

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

justsml avatar Oct 16 '18 14:10 justsml

@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.

chmac avatar Oct 19 '18 15:10 chmac

@chmac I will upgrade the starter soon.

greglobinski avatar Oct 19 '18 21:10 greglobinski

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!!!

justsml avatar Oct 21 '18 17:10 justsml

@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.

mateuszmatyszkowicz avatar Oct 27 '18 11:10 mateuszmatyszkowicz

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 avatar Oct 28 '18 22:10 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 :)

greglobinski avatar Nov 19 '18 08:11 greglobinski

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

justsml avatar Dec 13 '18 18:12 justsml

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 avatar Dec 21 '18 04:12 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

hendra-go avatar Dec 21 '18 04:12 hendra-go

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

greglobinski avatar Dec 21 '18 06:12 greglobinski

@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 avatar Dec 21 '18 07:12 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.

hendra-go avatar Dec 22 '18 11:12 hendra-go

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:

greglobinski avatar Dec 27 '18 11:12 greglobinski

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 avatar Dec 27 '18 15:12 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 avatar Dec 27 '18 21:12 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 avatar Dec 28 '18 12:12 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 ?

hendra-go avatar Dec 29 '18 09:12 hendra-go

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

ccapasso01 avatar Jan 28 '19 01:01 ccapasso01

@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 ?

hendra-go avatar Jan 28 '19 03:01 hendra-go

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

maxscience avatar Feb 20 '19 15:02 maxscience

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?

justsml avatar Feb 20 '19 22:02 justsml

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

maxscience avatar Feb 20 '19 22:02 maxscience

@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 avatar Feb 21 '19 04:02 hendra-go

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

hendra-go avatar Feb 21 '19 06:02 hendra-go