I just updated my gatsby site from 2.14.+ to 3.0.3+ and now some of my JavaScript no longer works

[interglobalmedia]

Description

Describe the issue that you're seeing.

Steps to reproduce

Clear steps describing how to reproduce the issue. Please link to a reproduction, this makes your issue much easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

Expected result

What should happen?

Actual result

What happened.

Environment

All environments, but especially develop. I get the following error during development build:

npm run build                                                                             ⏎ ✖ ✹ ✭

> [email protected] build /Users/mariacam/Development/interglobalmedia
> gatsby build

success open and validate gatsby-configs - 0.137s
warn Plugin gatsby-remark-reading-time is not compatible with your gatsby version 3.2.1 - It requires
gatsby@^2.0.0
warn Plugin gatsby-remark-reading-time is not compatible with your gatsby version 3.2.1 - It requires
gatsby@^2.0.0
success load plugins - 1.412s
success onPreInit - 0.050s
success delete html and css files from previous builds - 0.079s
success initialize cache - 0.006s
success copy gatsby files - 0.113s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.044s
success Checking for changed pages - 0.001s
success source and transform nodes - 1.346s
success building schema - 0.488s
warn code block or inline code language not specified in markdown. applying generic code block
info Total nodes: 856, SitePage nodes: 391 (use --verbose for breakdown)
success createPages - 10.506s
success Checking for changed pages - 0.002s
success createPagesStatefully - 1.503s
success Cleaning up stale page-data - 0.036s
success update schema - 0.157s
success onPreExtractQueries - 0.002s
success extract queries from components - 5.311s
success write out redirect data - 0.005s
success Build manifest and related icons - 0.399s
success onPostBootstrap - 1.107s
info bootstrap finished - 26.236s
warn [gatsby-transformer-sharp] The "fixed" and "fluid" resolvers are now deprecated. Switch to
"gatsby-plugin-image" for better performance and a simpler API. See https://gatsby.dev/migrate-images to
learn how.
success run static queries - 4.769s - 17/17 3.56/s
success run page queries - 46.053s - 412/412 8.95/s
success write out requires - 0.010s
warn Attempted import error: './Search.css' does not contain a default export (imported as 'classes').
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css
./node_modules/gatsby/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_mod
ules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/Header/Header.css
despite it was not able to fulfill desired ordering with these modules:
 * css
./node_modules/gatsby/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_mod
ules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/Search/Search.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-index-js
   - while fulfilling desired order of chunk group(s) component---src-pages-404-index-js,
component---src-pages-categories-index-js, component---src-pages-command-line-index-js,
component---src-pages-contact-index-js, component---src-pages-dev-workflows-index-js,
component---src-pages-fsjs-index-js, component---src-pages-git-for-devs-index-js,
component---src-pages-git-for-non-devs-index-js, component---src-pages-portfolio-index-js,
component---src-pages-portfolio-portfolio-view-1-js, component---src-pages-portfolio-portfolio-view-2-js,
component---src-pages-portfolio-portfolio-view-3-js, component---src-pages-portfolio-portfolio-view-4-js,
component---src-pages-portfolio-portfolio-view-5-js, component---src-pages-portfolio-portfolio-view-6-js,
component---src-pages-portfolio-portfolio-view-7-js, component---src-pages-portfolio-portfolio-view-8-js,
component---src-pages-services-index-js, component---src-pages-sitemap-index-js,
component---src-pages-tags-index-js, component---src-templates-blog-list-template-js,
component---src-templates-blog-post-template-js, component---src-templates-category-template-js,
component---src-templates-tag-template-js
success Building production JavaScript and CSS bundles - 76.443s
success Rewriting compilation hashes - 0.004s
success Building HTML renderer - 8.662s
success Building static HTML for pages - 1.890s - 412/412 217.96/s
info Generated public/sw.js, which will precache 9 files, totaling 578794 bytes.
The following pages will be precached:
/offline-plugin-app-shell-fallback/index.html
success onPostBuild - 0.316s
info Done building in 165.901199269 sec

Marias-MacBook-Pro ॐ  ~/Development/interglobalmedia:(4h2m|git@master!)
10330 ± npm run develop                                                                             ✖ ✹ ✭

> [email protected] develop /Users/mariacam/Development/interglobalmedia
> gatsby develop

success open and validate gatsby-configs - 0.169s
warn Plugin gatsby-remark-reading-time is not compatible with your gatsby version 3.2.1 - It requires
gatsby@^2.0.0
warn Plugin gatsby-remark-reading-time is not compatible with your gatsby version 3.2.1 - It requires
gatsby@^2.0.0
success load plugins - 1.944s
success onPreInit - 0.049s
success initialize cache - 0.008s
success copy gatsby files - 0.131s
success onPreBootstrap - 0.023s
success createSchemaCustomization - 0.061s
success Checking for changed pages - 0.001s
success source and transform nodes - 1.097s
success building schema - 0.512s
info Total nodes: 855, SitePage nodes: 390 (use --verbose for breakdown)
success createPages - 0.673s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.173s
success update schema - 0.080s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.176s
success onPostBootstrap - 0.181s
info bootstrap finished - 9.194s
success onPreExtractQueries - 0.001s
success extract queries from components - 4.403s
success write out requires - 0.033s
warn [gatsby-transformer-sharp] The "fixed" and "fluid" resolvers are now deprecated. Switch to
"gatsby-plugin-image" for better performance and a simpler API. See https://gatsby.dev/migrate-images to
learn how.
success run static queries - 0.253s - 3/3 11.84/s
success run page queries - 0.046s - 3/3 65.05/s

 ERROR 

The 'compilation' argument must be an instance of Compilation



  TypeError: The 'compilation' argument must be an instance of Compilation
  
  - NormalModule.js:180 Function.getCompilationHooks
    [interglobalmedia]/[gatsby]/[webpack]/lib/NormalModule.js:180:10
  
  - index.js:253 
    [interglobalmedia]/[gatsby]/[@pmmmwh]/react-refresh-webpack-plugin/lib/index.js:253:26
  
  
  - Hook.js:14 Hook.CALL_DELEGATE [as _call]
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[tapable]/lib/Hook.js:14:14
  
  - Compiler.js:1015 Compiler.newCompilation
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compiler.js:1015:26
  
  - Compiler.js:1057 
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compiler.js:1057:29
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1052 Compiler.compile
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compiler.js:1052:28
  
  - Watching.js:132 
    [interglobalmedia]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Watching.js:132:19
  
  
  - runMicrotasks
  
  - task_queues.js:93 processTicksAndRejections

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: macOS 11.2.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/Development/interglobalmedia/node_modules/.bin/yarn
    npm: 7.8.0 - ~/Development/interglobalmedia/node_modules/.bin/npm
  Languages:
    Python: 3.8.3 - /Users/mariacam/.pyenv/shims/python
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 86.0.1
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.0.3 => 3.2.1
    gatsby-cli: ^3.2.0 => 3.2.0
    gatsby-image: ^3.2.0 => 3.2.0
    gatsby-plugin-feed: ^3.2.0 => 3.2.0
    gatsby-plugin-google-analytics: ^3.2.0 => 3.2.0
    gatsby-plugin-gtag: ^1.0.13 => 1.0.13
    gatsby-plugin-manifest: ^3.2.0 => 3.2.0
    gatsby-plugin-netlify-cms: ^5.2.0 => 5.2.0
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
    gatsby-plugin-offline: ^4.2.0 => 4.2.0
    gatsby-plugin-postcss: ^4.2.0 => 4.2.0
    gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
    gatsby-plugin-sass: ^4.2.0 => 4.2.0
    gatsby-plugin-sharp: ^3.2.1 => 3.2.1
    gatsby-plugin-sitemap: ^3.2.0 => 3.2.0
    gatsby-plugin-styled-components: ^4.2.0 => 4.2.0
    gatsby-plugin-twitter: ^3.2.0 => 3.2.0
    gatsby-plugin-typography: ^3.2.0 => 3.2.0
    gatsby-remark-copy-linked-files: ^3.2.0 => 3.2.0
    gatsby-remark-embed-video: ^3.1.1 => 3.1.1
    gatsby-remark-images: ^4.2.0 => 4.2.0
    gatsby-remark-prismjs: ^4.2.0 => 4.2.0
    gatsby-remark-reading-time: ^1.1.0 => 1.1.0
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2
    gatsby-remark-responsive-iframe: ^3.2.0 => 3.2.0
    gatsby-remark-smartypants: ^3.2.0 => 3.2.0
    gatsby-source-filesystem: ^3.2.0 => 3.2.0
    gatsby-transformer-remark: ^3.2.0 => 3.2.0
    gatsby-transformer-sharp: ^3.2.0 => 3.2.0

I'm at my wits end and am ready to give up and move my site to something else. I love Gatsby but I just can't figure this out!

[LekoArts]

Hi, sorry to hear you run into issues!

Have you followed https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/ while upgrading?

To bisect your log a bit:

Plugin gatsby-remark-reading-time is not compatible with your gatsby version 3.2.1 - It requires
gatsby@^2.0.0

The plugin is setting the peerDep incorrectly: ariamckinley/gatsby-remark-reading-time#11
So you'll need to use the --legacy-peer-deps flag of npm: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#update-gatsby-version

Attempted import error: './Search.css' does not contain a default export (imported as 'classes').

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

The 'compilation' argument must be an instance of Compilation
TypeError: The 'compilation' argument must be an instance of Compilation

If you search for that (e.g. jantimon/html-webpack-plugin#1451) you'll see that it's probably that you have multiple versions of webpack installed. Try to remove your node_modules and package-lock.json and run npm install --legacy-peer-deps