'gatsby build' failing ('gatsby develop' works fine) due to: WebpackError: Cannot read properties of undefined (reading 'addLeadingSlash')

‘gatsby build’ failing (‘gatsby develop’ works fine) with the error, both on local and while publishing on netlify:

error Building static HTML for pages failed

109 |
110 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component,
[this].concat(args))), _this), _this.createHref = function (path) {

111 | return (0, _PathUtils.addLeadingSlash)(_this.props.basename + createURL(path));
| ^
112 | }, _this.handlePush = function (location) {
113 | var _this$props = _this.props,
114 | basename = _this$props.basename,

WebpackError: Cannot read properties of undefined (reading ‘addLeadingSlash’)

  • StaticRouter.js:111 StaticRouter._this.createHref
    ~/react-router/StaticRouter.js:111:1

  • Link.js:83 Link.render
    ~/react-router-dom/Link.js:83:1

  • ReactCompositeComponent.js:796 ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
    ~/react-dom/lib/ReactCompositeComponent.js:796:1

  • ReactCompositeComponent.js:819 ReactCompositeComponentWrapper._renderValidatedComponent
    ~/react-dom/lib/ReactCompositeComponent.js:819:1

  • ReactCompositeComponent.js:359 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:359:1

  • ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:255:1

  • ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

  • ReactCompositeComponent.js:368 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:368:1

  • ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:255:1

  • ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

my project is here: GitHub - karunrajk/react

You’re using Gatsby 1. I won’t recommend starting off a new project with Gatsby in 2024, let alone v1 which is ancient, deprecated and out of scope of support.

so i’m learning react from this course (https://designcode.io/react-contentful) - where they’re using gatsby. What is the way around now, i want to publish on netlify and this build failed is a blocke?r. works fine with gatsby develop

I don’t know when that course was created/updated, but Gatsby v1 was released in 2017: Release v1 release! :tada::tada::tada: · gatsbyjs/gatsby, so it’s 7.5 years old at this point and things have changed quite a bit. If the course is still teaching Gatsby v1, sorry to say you should be looking for a different course.

As of today, if you absolutely want to use a React-based framework, you should be learning Next.js or Remix.