Gatsby: how to use ES6 module syntax with gatsby-node.js

[peonmodel]

Summary

i tried using ES6 module syntax in gatsby-node.js since all other code is using ES6 syntax, just keeping them consistent

code

import files from './files.js';
import { graphql } from 'gatsby';

export const createPages = ({ actions }) => {
    const { createPage } = actions;
    console.log('files', files);
        return new Promise();
}

but server entered into a loop, repeating the same error

error gatsby-node.js returned an error


  Error: /Users/stona/Documents/repositories/gcsite/gatsby-node.js:2
  import files from './files.js';
  ^^^^^^
  SyntaxError: Unexpected token import

  - v8-compile-cache.js:226 NativeCompileCache._moduleCompile
    [gcsite]/[v8-compile-cache]/v8-compile-cache.js:226:18
...

Relevant information

also, basically every examples in
https://github.com/gatsbyjs/gatsby/tree/master/examples

using ES6 syntax for components but CommonJS syntax for gatsby-node.js

is there a reason for this inconsistency? it will be great that this limitation is documented somewhere

[LekoArts]

It’s a limitation of Node.js and not of Gatsby:
https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node

Plus Gatsby still supports Node v6

[jgierer12]

If you really want to use ES6 in gatsby-node.js, you can npm install @babel/register, change gatsby-node.js to

require(`@babel/register`)
module.exports = require(`./gatsby-node.mjs`)

And write gatsby-node.mjs (or whatever other filename you want) like this:

import files from './files.js';
import { graphql } from 'gatsby';

const createPages = ({ actions }) => {
    const { createPage } = actions;
    console.log('files', files);
        return new Promise();
}

export default { createPages }

[kuworking]

@jgierer12 It didn't work for me, it fails with the first import * from /gatsby-node.mjs, also after installing @babel/core as said here

    "@babel/core": "7.4.3",
    "@babel/register": "7.4.0",

with

// gatsby-node.js
require(`@babel/register`)
module.exports = require(`./gatsby-node.mjs`)

// gatsby-node.mjs
import * as path from 'path'

I get after yarn and yarn workspace site develop

 Error: F:\...\gatsby-node.mjs:1
  (function (exports, require, module, __filename, __dirname) { import * as path from 'path'
                                                                       ^
  SyntaxError: Unexpected token *

[mikepuglisi]

Babel 7 Working Example:

yarn add @babel/core @babel/register @babel/preset-env @babel/preset-react

// gatsby-node.js

require(`@babel/register`)({
  presets: ["@babel/preset-env", "@babel/preset-react"],
});
module.exports = require(`./gatsby-node.mjs`);

// gatsby-node.mjs

import React from "react"

const onCreatePage = ({ page, actions }) => {
  console.log("CREATE PAGE")
  const jsx = <div>TEST</div>;  
  return
}
export { onCreatePage }

React added for my specific use-case

[Floriferous]

@mikepuglisi I'm getting the following error with your setup:

Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/gatsby-node.mjs

Running node 12.14.0.

[mikepuglisi]

@Floriferous

I was running node 10.

Here is an example for all versions (Note no more mjs file extension)

// gatsby-node.js

require(`@babel/register`)({
  presets: ["@babel/preset-env", "@babel/preset-react"],
});
module.exports = require(`./gatsby-node-es6.js`);

// gatsby-node-es6.js

import React from "react"

const onCreatePage = ({ page, actions }) => {
  console.log("CREATE PAGE")
  const jsx = <div>TEST</div>;  
  return
}
export { onCreatePage }