Inspect flag passed to babel-spawned Node.js processes

[nicholaschiang]

Bug report

Describe the bug

This is similar to the issue described in #11030 but definitely worth a new issue (because using babel plugins and wanting code coverage stats is a common use case).

I'm using a combination of Istanbul packages to instrument my Typescript code for code coverage stats:

• babel-plugin-istanbul
• source-map-support
• ts-node
• nyc
• @istanbuljs/nyc-config-typescript
• @cypress/code-coverage

I've got my development script defined in package.json as:

"scripts": {
  "nxt:dev": "NODE_OPTIONS='--inspect' next dev -p 3000"
}

I'm guessing that the babel-plugin-istanbul package (which is run by Next.js during compilation) is trying to spawn sub-processes using the NODE_OPTIONS=--inspect option which results in the following error:

error - ./pages/[org]/index.tsx
Error: /home/nchiang/repos/tutorbook/pages/[org]/index.tsx: Command failed: /home/nchiang/.nvm/versions/node/v12.18.3/bin/node /home/nchiang/repos/tutorbook/node_modules/babel-plugin-istanbul/lib/load-nyc-config-sync.js /home/nchiang/repos/tutorbook
Starting inspector on 127.0.0.1:9229 failed: address already in use

This is described in the Next.js documentation but the docs fail to suggest a way to prevent babel plugins from using the NODE_OPTIONS passed to the original next dev command.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this repository (it's just the with-typescript example with Istanbul code instrumentation added):

$ git clone https://github.com/nicholaschiang/code-instrumentation-example

2. Install dependencies:

$ yarn install

3. Start the development server:

$ yarn dev

4. See compilation error:

Expected behavior

Next.js should ensure that none of the babel and webpack plugins try to use the NODE_OPTIONS passed to the original next dev command.

System information

• OS: Ubuntu 18.04.x
• Version of Next.js: 9.5.3
• Version of Node.js: 12.18.3

Additional context

Some more details about my code instrumentation setup:

My custom .babelrc looks like:

{
  "presets": ["next/babel"],
  "plugins": ["istanbul"]
}

My nyc configuration (included in my package.json):

  "nyc": {
    "all": true,
    "extends": "@istanbuljs/nyc-config-typescript",
    "exclude": [
      "pages/api/coverage.ts"
    ]
  }

I'm also using the @cypress/code-coverage package to generate nice static HTML renderings of the source-mapped code coverage (but that isn't really relevant to this issue and thus isn't included in the repro).