gatsby develop fails when using nextdns.io

[piotrfonte]

Description

With nextdns enabled, running gatsby develop locally fails and returns the following error:

➜  hyperaudio-landing git:(master) ✗ yarn start
yarn run v1.22.10
$ gatsby develop
/Users/p/Playground/hyperaudio-landing/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: listen EADDRNOTAVAIL: address not available 217.138.209.217:8000
    at Server.setupListenHandle [as _listen2] (node:net:1269:21)
    at listenInCluster (node:net:1334:12)
    at GetAddrInfoReqWrap.doListen (node:net:1471:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:69:8)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1313:8)
    at processTicksAndRejections (node:internal/process/task_queues:80:21) {
  code: 'EADDRNOTAVAIL',
  errno: -49,
  syscall: 'listen',
  address: '217.138.209.217',
  port: 8000
}
error Command failed with exit code 7.

Steps to reproduce

Enable nextdns filtering, run gatsby develop on any gatsby project. I noticed it while working on https://github.com/hyperaudio/2020-landing

Expected result

gatsby develop should work fine regardless of using nextdns or similar services.

Actual result

gatsby develop fails.

Environment

  System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.193
    Safari: 14.0.1
  npmPackages:
    gatsby: 2.26.0 => 2.26.0 
    gatsby-cli: 2.13.0 => 2.13.0 
    gatsby-image: 2.5.0 => 2.5.0 
    gatsby-plugin-alias-imports: 1.0.5 => 1.0.5 
    gatsby-plugin-google-fonts: 1.0.1 => 1.0.1 
    gatsby-plugin-material-ui: 2.1.10 => 2.1.10 
    gatsby-plugin-mdx: 1.4.0 => 1.4.0 
    gatsby-plugin-mdx-frontmatter: 0.0.2 => 0.0.2 
    gatsby-plugin-react-helmet: 3.4.0 => 3.4.0 
    gatsby-plugin-react-svg: 3.0.0 => 3.0.0 
    gatsby-plugin-sharp: 2.8.0 => 2.8.0 
    gatsby-plugin-tsconfig-paths: 1.0.2 => 1.0.2 
    gatsby-remark-component: 1.1.3 => 1.1.3 
    gatsby-remark-images: 3.5.0 => 3.5.0 
    gatsby-source-filesystem: 2.5.0 => 2.5.0 
    gatsby-transformer-remark: 2.10.0 => 2.10.0 
    gatsby-transformer-sharp: 2.6.0 => 2.6.0 

[jamo]

What's the ifconfig and netstat -nr output? and how did you configure the DNS?

[jamo]

Thanks to the obscure error I couldn't resist from trying to reproduce, I followed the steps on ther site and put in the custom DNS resolver, then set up a new gatsby site and the develop server works perfectly.

And to ensure the DNS server is being used:

$ nslookup localhost
Server:		45.90.28.196
Address:	45.90.28.196#53

Name:	localhost
Address: 127.0.0.1

[piotrfonte]

First things first: I’m using nextdns app to toggle the thing on/off.

Let me see if I can share my nextdns config with you somehow…

[piotrfonte]

So I figured it was DNS Rebinding Protection that was causing the issue:

Prevent attackers from taking control of your local devices through the Internet by automatically blocking DNS responses containing private IP addresses.

May not even be a bug on the Gatsby side, but just wanted to flag this out.

[jamo]

Interesting, I wonder if it would break the simplest node webserver:

const http = require('http')

const server = http.createServer((req, res) => {
        res.end('hello')
});
server.listen(8080, () => {console.log('listening on 8080')});

Save the above to test.js, run it node test.js and assuming it prints the listening on 8080 try in another terminal curl 127.0.0.1:8080

[jamo]

As a workaround would gatsby develop --host 127.0.0.1 or gatsby develop --host 0.0.0.0 (THIS MAY EXPOSE THE APP TO LOCAL NETWORK)