Error [ERR_REQUIRE_ESM] Github deploy error

I’ve recently added in some packages to my React project, since doing this I now see an error each time I run yarn run dev

internal/modules/cjs/loader.js:1102
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ~/GitHub/react-project/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js
require() of ES modules is not supported.
require() of ~/Documents/GitHub/react-project/node_modules/gatsby-recipes/node_modules/remark-mdx/index.js from
~/Documents/GitHub/react-project/node_modules/gatsby-recipes/dist/graphql-server/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type":
"module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from
~/Documents/GitHub/react-project/node_modules/gatsby-recipes/node_modules/remark-mdx/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (~/Documents/GitHub/react-project/node_modules/gatsby-recipes/dist/graphql-server/server.js:52:17)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

I’ve shortened the file paths for anonymity but you get the idea. I’m still able to make changes to my project locally and build the project, but when I push it to github it fails the actions and says 2 packages haven’t been installed correctly.

For instance this appears in the actions log:

out:  ERROR #98124  WEBPACK
out: 
out: Generating JavaScript bundles failed
out: 
out: Can't resolve 'react-animate-height' in '/home/dev_onlyorca/source/src/pages'
out: 
out: If you're trying to use a package make sure that 'react-animate-height' is
out: installed. If you're trying to use a local file make sure that the path is
out: correct.
out: 
out: File: src/pages/about.js

I saw some help that mentioned updating either the filename of the problematic module to .cjs or adding into the package.json file “type”: “module” but neither seemed to make any difference. I know this isn’t something that should normally happen but I have used both Yarn and npm installs in this project as some of the dependancies were only available through npm and it’s generated 2 lock files. Any help on this would be massively appreciated!