how to require constants which is exported in ES6 module?

Question

The original variables are exported in ES6 module like this:

export const url = 'https://example.com/api'

I know I can use this variable using import {url} from 'src/api'

But the thing is I can't use import in gatsby-config.js file and only can use ES5 syntax.

I tried like this:

const {url} = require('src/api')

but it doesn't work and get errors while gatsby develop

The error is following:

export const url = 'https://example.com/api'
  ^^^^^^
  SyntaxError: Unexpected token 'export'

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

  - v8-compile-cache.js:172 Module._compile
    [project]/[v8-compile-cache]/v8-compile-cache.js:172:36

  - loader.js:995 Object.Module._extensions..js
    internal/modules/cjs/loader.js:995:10

  - loader.js:815 Module.load
    internal/modules/cjs/loader.js:815:32

  - loader.js:727 Function.Module._load
    internal/modules/cjs/loader.js:727:14

  - loader.js:852 Module.require
    internal/modules/cjs/loader.js:852:19

  - v8-compile-cache.js:159 require
    [project]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - gatsby-config.js:4 Object.<anonymous>
    C:/project/gatsby-config.js:4:26

  - v8-compile-cache.js:178 Module._compile
    [project]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:995 Object.Module._extensions..js
    internal/modules/cjs/loader.js:995:10

  - loader.js:815 Module.load
    internal/modules/cjs/loader.js:815:32

  - loader.js:727 Function.Module._load
    internal/modules/cjs/loader.js:727:14

  - loader.js:852 Module.require
    internal/modules/cjs/loader.js:852:19

  - v8-compile-cache.js:159 require
    [project]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - get-config-file.js:33 getConfigFile
    [project]/[gatsby]/dist/bootstrap/get-config-file.js:33:20

Answer 1

When you exporting your constant if you use module.exports it should not give this error. Do it like this:

const yourUrl = 'https://example.com/api'

module.exports = { url: yourUrl }

Answer 2

Hope you know what you are trying to achieve because the result produces anti pattern against gatsbyjs specification as it already converts code internally from es6 to es5 after reading and validating gatsby-config.js .

So, try this way to require constants in gatsby-config.js which were exported in es6 module

• From es6 to es5 conversion, install @babel/cli and @babel/core package ie npm install @babel/cli @babel/core --save-dev
• Add new npm/yarn script in package.json -> scripts -> "prepare_config": "NODE_ENV=test babel./gatsby-config.js <LIST_OF_FILES_TO_CONVERT> --out-dir./"
• Make sure babel-preset-gatsby directory is present under node_modules if not then install it ie npm install babel-preset-gatsby --save-dev
• Either add .babelrc in project root directory having below code for babel preset and conversion.

 { "presets": [ [ "babel-preset-gatsby", { "forceAllTransforms": true, "useBuiltIns": "usage" } ] ] }

• OR if you don't want to add.babelrc then specify babel configuration in package.json.

   "babel": { "presets": [ [ "babel-preset-gatsby", { "forceAllTransforms": true, "useBuiltIns": "usage" } ] ] }

• Now run npm run prepare_config script first for conversion which will import required constants which were exported in ES6 module.

• Then you can run gatsby develop successfully.

Answer 3

{ "name": "server", "version": "1.0.0", "type": "module", "description": "", "main": "server.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "nodemon server.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@babel/core": "^7.16.5", "body-parser": "^1.19.1", "cors": "^2.8.5", "dotenv": "^10.0.0", "express": "^4.17.2", "mongoose": "^6.1.3", "nodemon": "^2.0.15" } }

change the type:"module" or set in package.json