"Cors error" after updating dependencies

[marcel0ll]

Description

Getting Cors error messages in console.

I believe that the problem origin is a mismatch between socket.io versions (2.3.0 and 2.4.0). Using yarn resolutions solves the issue.

Error is similar to described here

Steps to reproduce

npx gatsby new socket-error
cd socket-error
npm update
npm start

Repository for reroduction

Expected result

No "CORS error" in development

Actual result

Misleading "CORS error"

Environment

System:
OS: Linux 4.15 Linux Mint 19.2 (Tina)
CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v14.3.0/bin/yarn
npm: 6.14.10 - ~/.nvm/versions/node/v14.3.0/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.88
Firefox: 84.0.1
npmPackages:
gatsby: ^2.30.0 => 2.30.0
gatsby-image: ^2.9.0 => 2.9.0
gatsby-plugin-manifest: ^2.10.0 => 2.10.0
gatsby-plugin-offline: ^3.8.0 => 3.8.0
gatsby-plugin-react-helmet: ^3.8.0 => 3.8.0
gatsby-plugin-sharp: ^2.12.0 => 2.12.0
gatsby-source-filesystem: ^2.9.0 => 2.9.0
gatsby-transformer-sharp: ^2.10.0 => 2.10.0
npmGlobalPackages:
gatsby-cli: 2.16.2

[Warren-Ipro]

getting the same issue here. not sure where it came from and what i did to trigger this.

[slopen]

yes, this is very annoying error which originates from here:

https://socket.io/docs/v2/handling-cors/

Update: starting from Socket.IO 2.4.0, CORS is now disabled by default and you have to explicitly enable it.

and Gatsby itself is not ready for this change, which can be seen here (no explicit options are passed)

so if you have yarn.lock / package-json.lock locked with the proper 2.3.0 version you will be fine.

the problem is that Gatsby packaged like this

"socket.io": "^2.3.0"

which means ANY upgrade action will eventually cross the line of 2.4.0 and will cause the error above.

QUICK FIX:

as mentioned by TS add resolutions to package.json file like below

"resolutions": {
      "gatsby/socket.io": "2.3.0"
}

PROPOSED QUICK FIX:

use in Gatsby package.json ~ instead of ^

"socket.io": "~2.3.0"

REAL FIX we can imagine:

upgrade Gatsby socket.io dependency and implement passing origin option from --host develop option as here or here

[xu3u4]

FYI
socket.io v2.4.0 was released yesterday. https://socket.io/blog/socket-io-2-4-0/

Previously, CORS was enabled by default, which meant that a Socket.IO server sent the necessary CORS headers (Access-Control-Allow-xxx) to any domain. This will not be the case anymore, and you now have to explicitly enable it.

[LekoArts]

Well, that's unfortunate, unexpected and unreasonable of socket.io to introduce a breaking change in a minor. We'll lock the dependency for now and release a hotfix to the 2.30 version of Gatsby.

[LekoArts]

We've released [email protected] & [email protected] with the fix in #28885