Migrate to gatsby v2 #64
Comments
|
@Scot3004 I'm aware of that :) |
|
I've started work on getting this to build with Gatsby v2: https://github.com/leoj3n/gatsby-starter-personal-blog (git diff: leoj3n@3057627) Result of 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.893sResult of 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 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: But it was all a little too over my head, having never used Gatsby before I have no knowledge of the internals. |
|
I think would be better attack just one thing now, and when you done with Gatsby v2 migration add netlify |
|
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. |
|
I started upgrading, but feel like I've barely made any progress 😇 |
|
Check out my progress: #73 |
|
@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 I will upgrade the starter soon. |
|
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!!! |
|
@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. |
|
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. |
|
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 Is the v2 branch current? (Or could you use any help at this point?) |
|
Hello All,
That's all, it should be enough (at least in my case) |
|
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 |
|
@khairendra Great, are you willing to send a PR to the branch? |
|
@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. |
|
I have created a pull request #82 Hopefully it helps. Happy holiday all. |
|
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 . |
|
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 |
|
Gatsby Team decision to remove the special layout component in v2 has cause some problem on migrating from v1 to v2. Try this PR #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. |
|
@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.
What do you think @greglobinski ? |
|
@hendra-go @greglobinski any updates on this and Disqus support? 👍 it looks like react-jss is at version 10 now. |
|
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 totally! I’d also be interested in adding support for the Netlify-cms plugin |
|
@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: first: Using react-async-component, asynchronously import Navigator, ActionsBar, InfoBar and InfoBox in 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) // 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. |
|
@maxscience but if you still want to use diqus, you can check my answer here #85 |
|
@hendra-go - do you have a working fork/version of this working that we could clone or fork to mess with and deploy ourselves? |
|
@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 #64 (comment) 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. |
|
@hendra-go: Thanks. I cloned your fork. I've got most of the dependencies working so far. This is the only issue right now:
|
|
@ccapasso01 just remove 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 |
|
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.
|
|
@ccapasso01 can i see your gatsby-browser.js file? |
|
hmm... i can build fine here... I commented out gatsby-plugin-algolia, maybe that's the one causing your problem |
|
@ccapasso01 are you sure ? i just updated package.json to use gatsby v2.1.17 and i can still build without problem |
|
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. |
|
@gemfarmer I'm using v2.6.5 and it's working alright. |
|
@greglobinski why you stop doing work on this theme |
|
@prarora98 are you paying him to ask that? |
As you see version 2 of gatsby was released https://www.gatsbyjs.org/blog/2018-09-17-gatsby-v2/
The text was updated successfully, but these errors were encountered: