Consider upgrading to Gatsby v3
trevormunoz opened this issue · 4 comments
trevormunoz commented
I noticed that the announcement of Gatsby v3 promised faster and incremental local builds: https://www.gatsbyjs.com/blog/gatsby-v3/
Since airwaves is a fairly substantial site, would it be worth investigating the potential speedup.
Here is what a first build looked like on my machine recently:
> airwaves@0.0.1 start
> npm run develop
> airwaves@0.0.1 develop
> gatsby develop
success open and validate gatsby-configs - 0.070s
success load plugins - 0.659s
success onPreInit - 0.013s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.051s
success copy gatsby files - 0.094s
success onPreBootstrap - 0.009s
success createSchemaCustomization - 0.009s
success source and transform nodes - 23.620s
success building schema - 1.699s
success createPages - 18.378s
success createPagesStatefully - 3.990s
success updating schema - 0.829s
success onPreExtractQueries - 0.092s
success extract queries from components - 1.536s
success write out redirect data - 0.315s
success onPostBootstrap - 0.077s
info bootstrap finished - 55.988s
success run static queries - 0.429s - 1/1 2.33/s
success run page queries - 32.910s - 6401/6401 194.50/s
success write out requires - 0.053s
warn Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
DONE Compiled successfully in 14419ms 2:31:45 PM
⠀
I Netlify CMS is running at http://localhost:62745/admin/
⠀
You can now view airwaves in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
warn ESLintError:
/Users/umd-laptop/Code/airwaves/src/components/search-facets.js
19:11 warning Form label must have ALL of the following types of associated control: nesting, id
jsx-a11y/label-has-for
67:9 warning Form label must have ALL of the following types of associated control: nesting, id
jsx-a11y/label-has-for
warn ESLintError:
/Users/umd-laptop/Code/airwaves/src/pages/search.js
23:13 warning Visible, non-interactive elements with click handlers must have at least one keyboard listener
jsx-a11y/click-events-have-key-events
23:13 warning Non-interactive elements should not be assigned mouse or keyboard event listeners
jsx-a11y/no-noninteractive-element-interactions
success Building development bundle - 26.622s
edsu commented
I agree we should move forward to v3. One area that I'm a bit concerned about is whether the changes to CSS imports will bite us. Probably the easiest way to check is to try to update to v3 and see if it breaks:
trevormunoz commented
First pass at upgrade to Gatsby 3 😞
I tagged a release (v0.1.0) so there is something to roll back to if we this takes a minute to resolve. New version of package.json breaks the build. Looks like some changed webpack behavior is causing the issues …
> airwaves@0.0.1 start
> npm run develop
> airwaves@0.0.1 develop
> gatsby develop
info We're shipping new features! For final testing, we're rolling them out first to a small % of Gatsby users
and your site was automatically chosen as one of them. With your help, we'll then release them to everyone in the next minor release.
We greatly appreciate your help testing the change. Please report any feedback good or bad in the umbrella issue. If you do encounter
problems, please disable the flag by setting it to false in your gatsby-config.js like:
flags: {
THE_FLAG: false
}
The following flags were automatically enabled on your site:
- DEV_SSR · (Umbrella Issue (https://gatsby.dev/dev-ssr-feedback)) · Server Side Render (SSR) pages on full reloads during develop. Helps
you detect SSR bugs and fix them without needing to do full builds.
success open and validate gatsby-configs - 0.253s
success load plugins - 0.840s
success onPreInit - 0.073s
success initialize cache - 0.035s
success copy gatsby files - 0.234s
success onPreBootstrap - 0.042s
success createSchemaCustomization - 0.014s
success Checking for changed pages - 0.002s
success source and transform nodes - 5.237s
success building schema - 1.531s
info Total nodes: 22667, SitePage nodes: 6391 (use --verbose for breakdown)
success createPages - 9.173s
success Checking for changed pages - 0.013s
success createPagesStatefully - 4.573s
success update schema - 1.105s
success write out redirect data - 0.244s
success onPostBootstrap - 0.065s
info bootstrap finished - 28.818s
success onPreExtractQueries - 0.025s
success extract queries from components - 1.097s
success write out requires - 0.495s
success run static queries - 0.703s - 1/1 1.42/s
success run page queries - 1.426s - 3/3 2.10/s
DONE Compiled successfully in 25377ms 12:05:48 PM
⠀
I Netlify CMS is running at http://localhost:8000/admin/
warn
/Users/umd-laptop/Code/airwaves/src/pages/programs.js
7:1 warning Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:
Before:
export default () => {}
After:
const Named = () => {}
export default Named;
no-anonymous-exports-page-templates
7:1 warning Assign arrow function to a variable before exporting as module default
import/no-anonymous-default-export
/Users/umd-laptop/Code/airwaves/src/pages/search.js
23:13 warning Visible, non-interactive elements with click handlers must have at least one keyboard listener
jsx-a11y/click-events-have-key-events
23:13 warning Non-interactive elements should not be assigned mouse or keyboard event listeners
jsx-a11y/no-noninteractive-element-interactions
/Users/umd-laptop/Code/airwaves/src/templates/series.js
9:1 warning Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:
Before:
export default () => {}
After:
const Named = () => {}
export default Named;
no-anonymous-exports-page-templates
9:1 warning Assign arrow function to a variable before exporting as module default
import/no-anonymous-default-export
✖ 6 problems (0 errors, 6 warnings)
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/src/pages'
If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure that the path is
correct.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
File: src/pages/exhibits.js:7:0
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/node_modules/remark/node_modules/vfile'
If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure that the path is
correct.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
File: node_modules/remark/node_modules/vfile/core.js:3:11
ERROR #98124 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/node_modules/replace-ext'
If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure that the path is
correct.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
File: node_modules/replace-ext/index.js:3:11
failed Building development bundle - 65.416s
ERROR in ./src/pages/exhibits.js 7:0-24
Module not found: Error: Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/src/pages'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 26:11-28:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
ERROR in ./node_modules/remark/node_modules/vfile/core.js 3:11-26
Module not found: Error: Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/node_modules/remark/node_modules/vfile'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/remark/node_modules/vfile/index.js 4:12-32
@ ./node_modules/remark/node_modules/unified/index.js 5:12-28
@ ./node_modules/remark/index.js 3:14-32
@ ./src/templates/exhibit.js 10:0-28 14:22-28
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 71:11-73:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
ERROR in ./node_modules/replace-ext/index.js 3:11-26
Module not found: Error: Can't resolve 'path' in '/Users/umd-laptop/Code/airwaves/node_modules/replace-ext'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/remark/node_modules/vfile/core.js 4:14-36
@ ./node_modules/remark/node_modules/vfile/index.js 4:12-32
@ ./node_modules/remark/node_modules/unified/index.js 5:12-28
@ ./node_modules/remark/index.js 3:14-32
@ ./src/templates/exhibit.js 10:0-28 14:22-28
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 71:11-73:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
webpack compiled with 3 errors
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.
Please update the following components: SideEffect(NullComponent)
in SideEffect(NullComponent)
in HelmetWrapper
in SiteMetadata
in Fragment
in Layout
in IndexPage
in RouteHandler
in Context.Provider
in div
in FocusHandlerImpl
in Context.Consumer
in FocusHandler
in Context.Provider
in RouterImpl
in Context.Consumer
in Location
in Context.Consumer
in Router
in Context.Provider
in ServerLocation
trevormunoz commented
It was useful when working on the upgrade to not only blow away node_modules but also to run gatsby clean
trevormunoz commented
Netlify build succeeded so I think we can consider this closed