Gatsby: [v2] Update examples in v2 branch

Created on 30 May 2018  ·  12Comments  ·  Source: gatsbyjs/gatsby

Summary

Some of the examples in the v2 branch https://github.com/gatsbyjs/gatsby/tree/v2/examples

Have package.json versions pointed at latest instead of next - is this intentional?

Examples include:
https://github.com/gatsbyjs/gatsby/blob/v2/examples/using-styled-components/package.json
https://github.com/gatsbyjs/gatsby/blob/v2/examples/using-redux/package.json

help wanted maintenance

Most helpful comment

Examples migrated to Gatsby v2:

  • [x] [Client-only paths](https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths)
  • [x] [RSS Feed Example](https://github.com/gatsbyjs/gatsby/tree/master/examples/feed) (#6224)
  • [x] [Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram)
  • [x] [Gatsby Hacker News](https://github.com/gatsbyjs/gatsby/tree/master/examples/hn)
  • [x] [Image Processing](https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing)
  • [x] [No plugins](https://github.com/gatsbyjs/gatsby/tree/master/examples/no-plugins)
  • [x] [No trailing slashes](https://github.com/gatsbyjs/gatsby/tree/master/examples/no-trailing-slashes)
  • [x] [Gatsby Authentication Demo](https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth)
  • [x] [Sitemap](https://github.com/gatsbyjs/gatsby/tree/master/examples/sitemap) (https://github.com/gatsbyjs/gatsby/pull/5679)
  • [x] [Gatsby Styleguide Example](https://github.com/gatsbyjs/gatsby/tree/master/examples/styleguide) (#5712)
  • [x] [Using Drupal](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-asciidoc)
  • [x] [Using Contentful](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful)
  • [x] [using-css-modules](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules)
  • [x] [using-csv](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-csv)
  • [x] [Using Drupal](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal)
  • [x] [using-emotion-prismjs](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion-prismjs)
  • [x] [using-emotion](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion)
  • [x] [using-excel](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-excel)
  • [x] [Using Faker](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-faker)
  • [x] [Using Gatsby Image](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image)
  • [x] [Using Glamor](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-glamor)
  • [x] [using-hjson](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-hjson)
  • [x] [Using Javascript Transforms](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-javascript-transforms) (#6224)
  • [x] [Using JSS](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-jss)
  • [x] [Using Medium](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-medium)
  • [x] [using-mongodb](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mongodb)
  • [x] [using-page-loading-indicator](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-loading-indicator)
  • [x] [using-page-transitions](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions)
  • [x] [using-path-prefix](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-path-prefix)
  • [x] [using-react-native-web](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-native-web) (#7095)
  • [x] [using-react-url-query](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-url-query) (#7097)
  • [x] [using-redirects](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redirects)
  • [x] [Redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux) (#5713)
  • [x] [using-gatsby-remark-copy-linked-files](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark-copy-linked-files)
  • [x] [Using remark](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark)
  • [x] [Using gatsby-plugin-sass](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass)
  • [x] [using-sqip](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sqip) (#7081)
  • [x] [Using Styled Components](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styled-components)
  • [x] [using-styled-jsx](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styled-jsx)
  • [x] [Using Styletron CSS-in-JS engine](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styletron)
  • [x] [Using gatsby-plugin-stylus](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-stylus)
  • [x] [using-typescript](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript) (https://github.com/gatsbyjs/gatsby/issues/5520)
  • [x] [Using Wordpress](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress)

All 12 comments

Upgrading the examples is still a work in progress - any help would be very welcome!

Although note that the v2 upgrade guide hasn't been written yet, so you'll need to rely on checking how other examples have been changed and the placeholder breaking changes list.

If anyone wants to take any of these on, I'm happy to provide any guidance needed.

I added this issue to v2 project, so people can discover it easier if they want to help out on v2

It would be nice to have a list of already ported and yet to be done examples :)

A list would be excellent - would you like to make one and and add it here?

You can check the package.json of each example to see which ones have been upgraded. For examples running on v2, their Gatsby dependencies will be using the next version and have react and react-dom included:

https://github.com/gatsbyjs/gatsby/blob/d0e29272ed7b009dae18d35d41a45e700cdcab0d/examples/image-processing/package.json#L8-L18

Examples running on v1 will have different version numbers and no react or react-dom:

https://github.com/gatsbyjs/gatsby/blob/d0e29272ed7b009dae18d35d41a45e700cdcab0d/examples/using-remark-copy-linked-files/package.json#L7-L20

Oh and there's a work-in-progress migration guide at https://github.com/gatsbyjs/gatsby/blob/v2/docs/docs/migrating-from-v1-to-v2.md

Examples migrated to Gatsby v2:

  • [x] [Client-only paths](https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths)
  • [x] [RSS Feed Example](https://github.com/gatsbyjs/gatsby/tree/master/examples/feed) (#6224)
  • [x] [Gatsbygram](https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram)
  • [x] [Gatsby Hacker News](https://github.com/gatsbyjs/gatsby/tree/master/examples/hn)
  • [x] [Image Processing](https://github.com/gatsbyjs/gatsby/tree/master/examples/image-processing)
  • [x] [No plugins](https://github.com/gatsbyjs/gatsby/tree/master/examples/no-plugins)
  • [x] [No trailing slashes](https://github.com/gatsbyjs/gatsby/tree/master/examples/no-trailing-slashes)
  • [x] [Gatsby Authentication Demo](https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth)
  • [x] [Sitemap](https://github.com/gatsbyjs/gatsby/tree/master/examples/sitemap) (https://github.com/gatsbyjs/gatsby/pull/5679)
  • [x] [Gatsby Styleguide Example](https://github.com/gatsbyjs/gatsby/tree/master/examples/styleguide) (#5712)
  • [x] [Using Drupal](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-asciidoc)
  • [x] [Using Contentful](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful)
  • [x] [using-css-modules](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules)
  • [x] [using-csv](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-csv)
  • [x] [Using Drupal](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal)
  • [x] [using-emotion-prismjs](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion-prismjs)
  • [x] [using-emotion](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion)
  • [x] [using-excel](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-excel)
  • [x] [Using Faker](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-faker)
  • [x] [Using Gatsby Image](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image)
  • [x] [Using Glamor](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-glamor)
  • [x] [using-hjson](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-hjson)
  • [x] [Using Javascript Transforms](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-javascript-transforms) (#6224)
  • [x] [Using JSS](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-jss)
  • [x] [Using Medium](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-medium)
  • [x] [using-mongodb](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mongodb)
  • [x] [using-page-loading-indicator](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-loading-indicator)
  • [x] [using-page-transitions](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions)
  • [x] [using-path-prefix](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-path-prefix)
  • [x] [using-react-native-web](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-native-web) (#7095)
  • [x] [using-react-url-query](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-react-url-query) (#7097)
  • [x] [using-redirects](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redirects)
  • [x] [Redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux) (#5713)
  • [x] [using-gatsby-remark-copy-linked-files](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark-copy-linked-files)
  • [x] [Using remark](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark)
  • [x] [Using gatsby-plugin-sass](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass)
  • [x] [using-sqip](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sqip) (#7081)
  • [x] [Using Styled Components](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styled-components)
  • [x] [using-styled-jsx](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styled-jsx)
  • [x] [Using Styletron CSS-in-JS engine](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styletron)
  • [x] [Using gatsby-plugin-stylus](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-stylus)
  • [x] [using-typescript](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript) (https://github.com/gatsbyjs/gatsby/issues/5520)
  • [x] [Using Wordpress](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress)

I could probably grab sitemap one for start :). Happy to help

😍 for all the pull requests updating these examples. Keep 'em coming :)

RSS feed one has similar issue as sitemap. It's quite basic. I'll try to PR extended version to master first over the weekend.

I’m getting errors with source-hacker-news.

⠠ source and transform nodesfetch HN data: 17699.665ms
success source and transform nodes — 23.070 s
error UNHANDLED REJECTION


  TypeError: Cannot read property 'internal' of undefined

 - build-node-types.js:85 _.flatMap.groupBy.node
    [project-name]/[gatsby]/dist/schema/build-node-typ    es.js:85:55

  - lodash.js:489 arrayAggregator
    [project-name]/[lodash]/lodash.js:489:34

  - lodash.js:4835 Function.groupBy
    [project-name]/[lodash]/lodash.js:4835:16

  - lodash.js:4380
    [project-name]/[lodash]/lodash.js:4380:28

  - lodash.js:675 arrayReduce
    [project-name]/[lodash]/lodash.js:675:21

  - lodash.js:4379 baseWrapperValue
    [project-name]/[lodash]/lodash.js:4379:14

  - lodash.js:9042 LodashWrapper.wrapperValue
    [project-name]/[lodash]/lodash.js:9042:14

  - build-node-types.js:85 createNodeFields
    [project-name]/[gatsby]/dist/schema/build-node-typ    es.js:85:111

  - build-node-types.js:171 fields
    [project-name]/[gatsby]/dist/schema/build-node-typ    es.js:171:23

  - Array.forEach

  npm ERR!

@ryanditjia I'm getting the same errors. Looks like an issue with the plugin itself.

Also, going through using-javascript-transforms example, I'm unsure of what's going wrong but looks like it keeps throwing exports is undefined errors.

Thanks everyone for your help with this issue 🎉 Marking this as done.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jimfilippou picture jimfilippou  ·  3Comments

magicly picture magicly  ·  3Comments

dustinhorton picture dustinhorton  ·  3Comments

totsteps picture totsteps  ·  3Comments

3CordGuy picture 3CordGuy  ·  3Comments