umd-mith / airwaves

Unlocking the Airwaves
https://mith.umd.edu/airwaves/
MIT License
9 stars 2 forks source link

Consider upgrading to Gatsby v3 #2

Closed trevormunoz closed 3 years ago

trevormunoz commented 3 years ago

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 3 years ago

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:

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules

trevormunoz commented 3 years ago

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 3 years ago

It was useful when working on the upgrade to not only blow away node_modules but also to run gatsby clean

trevormunoz commented 3 years ago

Netlify build succeeded so I think we can consider this closed