fix(gatsby): add explicit dependency on socket.io-client and explicitly set url-loader fallback (#24465)

* provide fully qualified path for url-loader's `fallback`

* create resolution for `socket.io-client`, for import in `.cache/app.js`

* include socket.io-client as dependency

Author: Js-Brecht

packages/gatsby/package.json

@@ -132,6 +132,7 @@
     "signal-exit": "^3.0.3",
     "slugify": "^1.4.0",
     "socket.io": "^2.3.0",
+    "socket.io-client": "2.3.0",
     "stack-trace": "^0.0.10",
     "string-similarity": "^1.2.2",
     "style-loader": "^0.23.1",

packages/gatsby/src/utils/webpack-utils.ts

@@ -250,6 +250,7 @@ export const createWebpackUtils = (
         options: {
           limit: 10000,
           name: `${assetRelativeRoot}[name]-[hash].[ext]`,
+          fallback: require.resolve(`file-loader`),
           ...options,
         },
       }

packages/gatsby/src/utils/webpack.config.js

@@ -404,6 +404,9 @@ module.exports = async (
         "@pmmmwh/react-refresh-webpack-plugin": path.dirname(
           require.resolve(`@pmmmwh/react-refresh-webpack-plugin/package.json`)
         ),
+        "socket.io-client": path.dirname(
+          require.resolve(`socket.io-client/package.json`)
+        ),
       },
       plugins: [
         // Those two folders are special and contain gatsby-generated files