Failed to connect to 127.0.0.1 on WSL

Summary

When running in debug mode, I think the hot-reload is failing to connect on 127.0.0.1, because (in WSL) should be localhost. How can I change this to localhost?

Relevant information

I am using Windows with WSL2 and Ubuntu to develop.

Environment (if relevant)

yarn gatsby info            
yarn run v1.22.4
$ /home/user/workspace/.../node_modules/.bin/gatsby info

  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 10.22.0 - /tmp/yarn--1597407848377-0.6519534587353835/node
    Yarn: 1.22.4 - /tmp/yarn--1597407848377-0.6519534587353835/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v10.22.0/bin/npm

Done in 1.05s.

File contents (if changed)

gatsby-config.js:

module.exports = {
  pathPrefix: '/projectName',
  siteMetadata: {
     // hidden
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-layout`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

package.json:

{
  "name": "@projectName/web",
  "private": true,
  "version": "0.1.0",
  "dependencies": {
    "@material-ui/core": "^4.10.1",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "4.0.0-alpha.55",
    "@material-ui/styles": "4.10.0",
    "firebase": "^7.14.3",
    "gatsby": "^2.21.21",
    "gatsby-image": "^2.4.3",
    "gatsby-plugin-layout": "^1.3.2",
    "gatsby-plugin-manifest": "^2.4.2",
    "gatsby-plugin-offline": "^3.2.1",
    "gatsby-plugin-react-helmet": "^3.3.1",
    "gatsby-plugin-sharp": "^2.6.2",
    "gatsby-source-filesystem": "^2.3.1",
    "gatsby-transformer-sharp": "^2.5.2",
    "gh-pages": "2.2.0",
    "jss": "10.0.3",
    "jss-preset-default": "10.0.3",
    "lodash.throttle": "4.1.1",
    "moment": "2.25.3",
    "openpgp": "^4.10.7",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-content-loader": "5.0.4",
    "react-dom": "^16.12.0",
    "react-firebaseui": "^4.1.0",
    "react-helmet": "^6.0.0",
    "react-intl": "^4.5.3",
    "react-medium-image-zoom": "^3.0.15",
    "react-number-format": "4.3.1",
    "react-redux": "^7.1.3",
    "react-redux-firebase": "^3.4.0",
    "react-text-mask": "5.4.3",
    "react-typography": "^0.16.19",
    "react-webcam": "5.0.1",
    "redux": "^4.0.5",
    "redux-firestore": "^0.13.0",
    "typography": "0.16.19",
    "typography-breakpoint-constants": "0.16.19"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/plugin-transform-typescript": "^7.9.6",
    "babel-plugin-react-intl": "^7.5.9",
    "react-intl-translations-manager": "5.0.3",
    "rimraf": "^3.0.2"
  },
  "license": "MIT",
  "scripts": {
    "build": "gatsby build --prefix-paths",
    "build:intl": "rimraf .i18n && NODE_ENV=intl $(npm bin)/babel --verbose --extensions=.tsx,.ts src && node translations.js",
    "develop": "gatsby develop",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "homepage": "https://...",
  "repository": {
    "type": "git",
    "url": "https://github.com/..."
  },
  "babel": {
    "presets": [
      "babel-preset-gatsby"
    ],
    "env": {
      "intl": {
        "plugins": [
          [
            "@babel/plugin-transform-typescript",
            {
              "isTSX": true
            }
          ],
          [
            "babel-plugin-react-intl",
            {
              "messagesDir": "./.i18n"
            }
          ]
        ]
      }
    }
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[wardpeet]

Hey @skhaz,

If you’re using WSL2, this might be the bug that you’re hitting https://github.com/microsoft/WSL/issues/5298#issuecomment-644733916. There is nothing from a gatsby point of view we can do.

We’re marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[skhaz]

@wardpeet disabling the fast boot solved the issue, many thanks!