Gatsby Open Source V3 doesn't support gatsby esm files

[syckki]

Description

I'm trying use ESM with Gatsby community edition v3, but it does not work as I expected. I found a workaround using this command "npx --node-arg '-r esm' gatsby build", however I would like to use the recommendation from Gatsby by using "gatsby-ssr.esm.js".

Steps to reproduce

• Migrating Gatsby Open Source from v2 to v3

// package.json
{
  "dependencies": {
    "gatsby": "3.3.1"
  }
}

• Enabling ESM

1. Install esm (npm i esm)
2. Next rename your gatsby-ssr.js file to gatsby-ssr.esm.js. Then refactor the contents of the file to ES6 module syntax like this:

import React from "react"

export function onRenderBody({ pathname }) {

  // solve pathname and add some content to script or style tags in HTML
  console.log('pathname', pathname);
}

3. Now create a new gatsby-ssr.js file and add the following content:

// gatsby-ssr.js

const requireEsm = require('esm')(module);
module.exports = requireEsm('./gatsby-ssr.esm.js');

Expected result

After run gatsby build or gatsby develop the process should consider the file gatsby-ssr.esm.js but it doesn't happens. console.log never run.

Actual result

gatsby-ssr.esm.js is ignored

Environment

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/Documents/unete-web-v3/node_modules/.bin/yarn
    npm: 6.14.12 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.85
    Edge: 90.0.818.46
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    gatsby: 3.3.1 => 3.3.1
    gatsby-cli: 3.3.0 => 3.3.0
    gatsby-image: 3.3.0 => 3.3.0
    gatsby-plugin-alias-imports: 1.0.5 => 1.0.5
    gatsby-plugin-load-script: 1.1.0 => 1.1.0
    gatsby-plugin-manifest: 3.3.0 => 3.3.0
    gatsby-plugin-offline: 4.3.0 => 4.3.0
    gatsby-plugin-preconnect: 1.2.0 => 1.2.0
    gatsby-plugin-react-helmet: 4.3.0 => 4.3.0
    gatsby-plugin-react-svg: 3.0.1 => 3.0.1
    gatsby-plugin-robots-txt: 1.5.6 => 1.5.6
    gatsby-plugin-sass: 4.3.0 => 4.3.0
    gatsby-plugin-sharp: 3.3.1 => 3.3.1
    gatsby-plugin-sitemap: 3.3.0 => 3.3.0
    gatsby-plugin-styled-components: 4.3.0 => 4.3.0
    gatsby-plugin-webfonts: 2.1.0 => 2.1.0
    gatsby-source-filesystem: 3.3.0 => 3.3.0
    gatsby-transformer-inline-svg: 0.1.0 => 0.1.0
    gatsby-transformer-sharp: 3.3.0 => 3.3.0
  npmGlobalPackages:
    gatsby-cli: 2.12.66