Upgrading Gatsby to V5 - Cannot read properties of undefined (reading 'createServerContext') #37979

benwainwright · 2023-04-27T11:55:48Z

benwainwright
Apr 27, 2023

Pretty much what the title says - I'm trying to upgrade Gatsby to V5 but I'm getting the following error message and stack trace when I try to build. I believe I've updated all the correct dependencies (react is up to date for example). Would really appreciate some guidance on what to do here....

ERROR  UNKNOWN

Cannot read properties of undefined (reading 'createServerContext')



  TypeError: Cannot read properties of undefined (reading 'createServerContext')
  
  - hooks-create-context.js:21 h
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/webpack:/gatsby-starter-default/src/lib/hooks-create-context.js:21:13
  
  - hooks-create-context.js:28 Object.8193
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/webpack:/gatsby-starter-default/src/lib/hooks-create-context.js:28:28
  
  - bootstrap:19 require
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/webpack:/gatsby-starter-default/webpack/bootstrap:19:1
  
  - static-entry.js:7 
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/webpack:/gatsby-starter-default/.cache/static-entry.js:7:48
  
  - render-page.js:29694 
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/render-page.js:29694:3
  
  - render-page.js:29699 Object.<anonymous>
    /Users/benwainwright/repos/www.benwainwright.me/.cache/page-ssr/routes/render-page.js:29699:12
  
  - loader:1218 Module._compile
    node:internal/modules/cjs/loader:1218:14
  
  - loader:1272 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1272:10
  
  - .pnp.cjs:37690 Object.require$$0.Module._extensions..js
    /Users/benwainwright/repos/www.benwainwright.me/.pnp.cjs:37690:33
  
  - loader:1081 Module.load
    node:internal/modules/cjs/loader:1081:32
  
  - .pnp.cjs:37527 Function.require$$0.Module._load
    /Users/benwainwright/repos/www.benwainwright.me/.pnp.cjs:37527:14
  
  - loader:1105 Module.require
    node:internal/modules/cjs/loader:1105:19
  
  - helpers:103 require
    node:internal/modules/cjs/helpers:103:18
  
  - page-mode.ts:124 preparePageTemplateConfigs
    [gatsby-virtual-3ca7512716]/[gatsby]/src/utils/page-mode.ts:124:24
  
  - build.ts:289 build
    [gatsby-virtual-3ca7512716]/[gatsby]/src/commands/build.ts:289:37

benwainwright · 2023-04-28T12:25:39Z

benwainwright
Apr 28, 2023
Author

Running gatsby develop gives a bit more useful info, as you get the actual codeframe for the error

  19 |
  20 | function createServerOrClientContext(name, defaultValue) {
> 21 |   if (React.createServerContext) {
     |             ^
  22 |     return createServerContext(name, defaultValue)
  23 |   }
  24 |

And a slightly different stack trace



  WebpackError: TypeError: Cannot read properties of undefined (reading 'createServerContext')
  
  - hooks-create-context.js:21 
    gatsby-starter-default/src/lib/hooks-create-context.js:21:13
  
  - hooks-create-context.js:28 
    gatsby-starter-default/src/lib/hooks-create-context.js:28:28
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - find-path.js:1 
    gatsby-starter-default/.cache/find-path.js:1:1
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - loader.js:4 
    gatsby-starter-default/.cache/loader.js:4:1
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - gatsby-browser-entry.js:1 
    gatsby-starter-default/.cache/gatsby-browser-entry.js:1:1
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - gatsby-ssr.js:6 
    [gatsby-plugin-feed-npm-5.9.0-7025fe7c17-d6467cca12.zip]/[gatsby-plugin-feed]/gatsby-ssr.js:6:15
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - api-runner-ssr.js:3 
    gatsby-starter-default/.cache/api-runner-ssr.js:3:15
  
  - bootstrap:19 
    gatsby-starter-default/webpack/bootstrap:19:1
  
  - develop-static-entry.js:5 
    gatsby-starter-default/.cache/develop-static-entry.js:5:1

Noting this is to do with gatsby-plugin-feed I had a look at that file in the gatsby repo and can see it does

import React from "react" at the top. This is returning undefined which is what is blowing up.

0 replies

gh640 · 2023-04-30T09:41:37Z

gh640
Apr 30, 2023

Have you cleaned the cache? If not, please try cleaning the cache.

If you provide a minimal reproduction (or at least package.json), it will be easier to get support :)

0 replies

benwainwright · 2023-05-01T15:09:24Z

benwainwright
May 1, 2023
Author

I have tried cleaning the cache yes.

Since I posted this message, I've switched the yarn nodeLinker to node-modules to see if this was a pnp issue. The original issue went away, and now I'm faced with a new one:

ERROR in ./.cache/fast-refresh-overlay/helpers/focus-trap.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
TypeError: /Users/benwainwright1/repos/www.benwainwright.me/.cache/fast-refresh-overlay/helpers/focus-trap.js:
/Users/benwainwright1/repos/www.benwainwright.me/.cache/fast-refresh-overlay/helpers/focus-trap.js: Cannot read properties of null (reading 'consequent')
    at NodePath._getKey (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/family.ts:417:25)
    at NodePath.get (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/family.ts:402:17)
    at isRemoved (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/isRemoved.ts:37:17)
    at map (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:149:16)
    at Array.map (<anonymous>)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:422:6)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:442:3)
    at mutate (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:514:3)
    at forEach (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:395:3)
    at Array.forEach (<anonymous>)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:440:11)
    at mutate (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:514:3)
    at forEach (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:395:3)
    at Array.forEach (<anonymous>)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:440:11)
    at mutate (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:514:3)
    at forEach (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:395:3)
    at Array.forEach (<anonymous>)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:440:11)
    at removeWithRelated (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/utils/src/scopeHelpers.ts:442:3)
    at Object.call (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@linaria/babel-preset/src/plugins/preeval.ts:166:32)
    at NodePath._call (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:34:20)
    at NodePath.call (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:19:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:92:31)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
    at TraversalContext.visitSingle (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:108:19)
    at TraversalContext.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:176:19)
    at traverseNode (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/traverse-node.ts:34:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:99:33)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
    at TraversalContext.visitSingle (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:108:19)
    at TraversalContext.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:176:19)
    at traverseNode (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/traverse-node.ts:34:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:99:33)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
    at TraversalContext.visitSingle (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:108:19)
    at TraversalContext.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:176:19)
    at traverseNode (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/traverse-node.ts:34:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:99:33)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
    at TraversalContext.visitMultiple (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:98:17)
    at TraversalContext.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:174:19)
    at traverseNode (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/traverse-node.ts:34:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:99:33)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
    at TraversalContext.visitMultiple (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:98:17)
    at TraversalContext.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:174:19)
    at traverseNode (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/traverse-node.ts:34:17)
    at NodePath.visit (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/path/context.ts:99:33)
    at TraversalContext.visitQueue (/Users/benwainwright1/repos/www.benwainwright.me/node_modules/@babel/traverse/src/context.ts:144:16)
 @ ./.cache/fast-refresh-overlay/components/overlay.js 7:0-45 56:19-27
 @ ./.cache/fast-refresh-overlay/components/build-error.js 5:0-75 30:28-35 31:34-40 41:28-43 45:27-31 50:28-34
 @ ./.cache/fast-refresh-overlay/index.js 9:0-54 150:31-41
 @ ./.cache/root.js 14:0-56 131:27-45
 @ ./.cache/app.js 18:0-26 135:31-35

0 replies

benwainwright · 2023-05-01T15:09:44Z

benwainwright
May 1, 2023
Author

here is my package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.21.0",
    "@babel/plugin-transform-react-jsx": "7.21.0",
    "@babel/preset-env": "7.21.4",
    "@babel/preset-react": "7.18.6",
    "@babel/preset-typescript": "7.21.4",
    "@emotion/react": "11.10.6",
    "@gatsbyjs/reach-router": "2.0.1",
    "@mikaelkristiansson/domready": "1.0.11",
    "@react-icons/all-files": "^4.1.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "14.0.0",
    "@types/aws-lambda": "8.10.84",
    "@types/jest": "29.5.1",
    "@types/node": "18.16.1",
    "@types/react": "18.2.0",
    "@types/react-helmet": "6.1.1",
    "@types/testing-library__jest-dom": "5.14.5",
    "@typescript-eslint/eslint-plugin": "5.1.0",
    "@typescript-eslint/parser": "5.1.0",
    "anser": "2.1.1",
    "aws-cdk": "2.77.0",
    "aws-cdk-lib": "2.77.0",
    "aws-lambda": "1.0.6",
    "aws-sdk": "2.1009.0",
    "axios": "0.23.0",
    "babel-jest": "^29.5.0",
    "babel-plugin-remove-graphql-queries": "5.9.0",
    "babel-preset-gatsby": "3.9.0",
    "constructs": "next",
    "css.escape": "1.5.1",
    "esbuild": "0.17.18",
    "eslint": "8.0.1",
    "eslint-config-benwainwright": "https://github.com/benwainwright/eslint-config-benwainwright",
    "eslint-import-resolver-typescript": "2.5.0",
    "eslint-plugin-array-func": "3.1.7",
    "eslint-plugin-filenames": "1.3.2",
    "eslint-plugin-fp": "2.3.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-promise": "5.1.0",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-sonarjs": "0.10.0",
    "eslint-plugin-spellcheck": "0.0.19",
    "eslint-plugin-unicorn": "37.0.1",
    "event-source-polyfill": "1.0.24",
    "formik": "2.2.9",
    "gatsby": "5.9.0",
    "gatsby-legacy-polyfills": "3.9.0",
    "gatsby-link": "5.9.0",
    "gatsby-plugin-feed": "5.9.0",
    "gatsby-plugin-gatsby-cloud": "5.9.0",
    "gatsby-plugin-google-analytics": "5.9.0",
    "gatsby-plugin-google-tagmanager": "5.9.0",
    "gatsby-plugin-image": "3.9.0",
    "gatsby-plugin-linaria": "4.0.1",
    "gatsby-plugin-manifest": "5.9.0",
    "gatsby-plugin-offline": "6.9.0",
    "gatsby-plugin-react-helmet": "6.9.0",
    "gatsby-plugin-sharp": "5.9.0",
    "gatsby-plugin-sitemap": "6.9.0",
    "gatsby-plugin-ts-config": "2.1.3",
    "gatsby-react-router-scroll": "6.9.0",
    "gatsby-rehype-prismjs": "2.0.0",
    "gatsby-remark-highlight-code": "3.3.0",
    "gatsby-remark-prismjs": "7.9.0",
    "gatsby-source-filesystem": "5.9.0",
    "gatsby-transformer-rehype": "2.0.1",
    "gatsby-transformer-remark": "6.9.0",
    "gatsby-transformer-sharp": "5.9.0",
    "http-status-codes": "2.1.4",
    "jest": "29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-extended": "1.1.0",
    "jest-transform-stub": "2.0.0",
    "linaria": "4.1.16",
    "lodash": "4.17.21",
    "mitt": "3.0.0",
    "path": "0.12.7",
    "platform": "1.3.6",
    "prismjs": "1.24.1",
    "prop-types": "15.7.2",
    "query-string": "7.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-helmet": "6.1.0",
    "react-spinners": "0.13.8",
    "rehype-highlight": "6.0.0",
    "rehype-react": "7.2.0",
    "shallow-compare": "1.2.2",
    "source-map-support": "0.5.19",
    "stack-trace": "1.0.0-pre1",
    "ts-node": "10.9.1",
    "typescript": "5.0.4",
    "typescript-plugin-css-modules": "4.1.1",
    "unified": "10.1.0"
  },
  "devDependencies": {
    "prettier": "2.2.1",
    "title-case": "3.0.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "develop:lan": "gatsby develop -H 0.0.0.0",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "lint": "eslint src",
    "types": "tsc",
    "clean": "gatsby clean",
    "test:ci": "CI=true jest",
    "test": "jest",
    "test:Watch": "jest --watch"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "packageManager": "[email protected]"
}

1 reply

gh640 May 6, 2023

@benwainwright

I ran npm install with your package.json and the following error occurred:

❯ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   eslint@"8.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.13.0" from [email protected]
npm ERR! node_modules/eslint-config-benwainwright
npm ERR!   eslint-config-benwainwright@"https://github.com/benwainwright/eslint-config-benwainwright" from the root project

I removed eslint-config-benwainwright from dependencies and ran npm install. Then, the following error is raised:

❯ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   eslint@"8.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.0.0" from [email protected]
npm ERR! node_modules/eslint-plugin-promise
npm ERR!   eslint-plugin-promise@"5.1.0" from the root project

I also found you use [email protected] that is not compatible with Gatsby v5.

gatsby-transformer-rehype's peerDependencies:

    "peerDependencies": {
        "gatsby": "^3.0.0 || ^4.0.0"
    }

I'm not sure what the cause is but it'd help to resolve these issues first. I recommend you to read the migration guide if you get stuck:

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/

The following comment also will help (though it's about a different issue):

#36547 (comment)

Try these things:

Remove gatsby-cli from the deps since it's not needed

Check if you have multiple versions of packages installed (like react etc.)

Update react to v18 (since you pinned it to v17) since MDX v2 wants React 18

Remove packages bit by bit (e.g. radix) and see when it works

Downgrade Radix (since it's a major version bump)

(Regarding issues related with yarn, I cannot comment as I don't use yarn for Gatsby-based projects.)

JorgeAntrax · 2025-01-10T16:34:50Z

JorgeAntrax
Jan 10, 2025

I Resolve the problem change React And React DOM versions, actually have react 19.0.0 to downgrade 18.0.0, for example:

"react": "^19.0.0",
"react-dom": "^19.0.0",

change to

"react": "^18.0.0",
"react-dom": "^18.0.0",

0 replies

JorgeAntrax · 2025-01-10T16:35:12Z

JorgeAntrax
Jan 10, 2025

NOTE> i have node js 22

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrading Gatsby to V5 - Cannot read properties of undefined (reading 'createServerContext') #37979

{{title}}

Replies: 6 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Upgrading Gatsby to V5 - Cannot read properties of undefined (reading 'createServerContext') #37979

benwainwright Apr 27, 2023

Replies: 6 comments · 1 reply

benwainwright Apr 28, 2023 Author

gh640 Apr 30, 2023

benwainwright May 1, 2023 Author

benwainwright May 1, 2023 Author

gh640 May 6, 2023

JorgeAntrax Jan 10, 2025

JorgeAntrax Jan 10, 2025

benwainwright
Apr 27, 2023

Replies: 6 comments 1 reply

benwainwright
Apr 28, 2023
Author

gh640
Apr 30, 2023

benwainwright
May 1, 2023
Author

benwainwright
May 1, 2023
Author

JorgeAntrax
Jan 10, 2025

JorgeAntrax
Jan 10, 2025