Failed to connect to 127.0.0.1 on WSL

[skhaz]

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

[blainekasten]

127.0.0.1 is localhost. localhost is just a special mapping to that ip address which is called a loopback ip. Does this happen all the time for you? I've seen this when I quit my gatsby server but still have the page open.

[wardpeet]

Hey @skhaz,

If you're using WSL2, this might be the bug that you're hitting microsoft/WSL#5298 (comment). 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]

Thanks @wardpeet

[wardpeet]

Rebooting your machine might help here too from time to time

[skhaz]

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