Gatsby Node createPages is not working with Typescript #35851

richardnguyen99 · 2022-06-05T04:57:32Z

richardnguyen99
Jun 5, 2022

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I just create a Gatsby project, which I have cloned from this starter-default. I want to add Typescript to the project just for the sake of VSCode's syntax highlighting. So I found that Gatsby supports Typescript natively. Anyway, I followed this article to add Typescript to Gatsby config files.

Then I encounter an error with createPages in gatsby-node written in Typescript. The error message looks like this

> gatsby build

success compile gatsby files - 1.605s
success load gatsby config - 0.031s
success load plugins - 0.487s
success onPreInit - 0.004s
success delete worker cache from previous builds - 0.003s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.109s
success copy gatsby files - 0.108s
success Compiling Gatsby Functions - 0.162s
success onPreBootstrap - 0.177s
success createSchemaCustomization - 0.007s
success Checking for changed pages - 0.005s
success source and transform nodes - 0.127s
info Writing GraphQL type definitions to /home/riki208/github/richardhnguyen.com/.cache/schema.gql
success building schema - 0.427s

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

(void 0) is not a function

> 1 | !function(e,r,n,t,o){var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof
global?global:{},u="function"==typeof i.parcelRequiredbc1&&i.parcelRequiredbc1,f=u.cache||{},c="undefined"!=typeof module&&"function"==typeof
module.require&&module.require.bind(module);function l(r,n){if(!f[r]){if(!e[r]){var t="function"==typeof i.parcelRequiredbc1&&i.parcelRequiredbc1;if(!n&&t)return t(r,!0);if(u)return
u(r,!0);if(c&&"string"==typeof r)return c(r);var o=new Error("Cannot find module '"+r+"'");throw o.code="MODULE_NOT_FOUND",o}s.resolve=function(n){var t=e[r][1][n];return
null!=t?t:n},s.cache={};var d=f[r]=new l.Module(r);e[r][0].call(d.exports,s,d,d.exports,this)}return f[r].exports;function s(e){var
r=s.resolve(e);return!1===r?{}:l(r)}}l.isParcelRequire=!0,l.Module=function(e){this.id=e,this.bundle=l,this.exports={}},l.modules=e,l.cache=f,l.parent=u,l.register=function(r,n){e[r]=[functio
n(e,r){r.exports=n},{}]},Object.defineProperty(l,"root",{get:function(){return i.parcelRequiredbc1}}),i.parcelRequiredbc1=l;for(var d=0;d<r.length;d++)l(r[d]);var s=l(n);"object"==typeof
exports&&"undefined"!=typeof module?module.exports=s:"function"==typeof define&&define.amd&&define((function(){return s}))}({li0r4:[function(e,r,n){var
t=e("@parcel/transformer-js/src/esmodule-helpers.js");t.defineInteropFlag(n),t.export(n,"createPages",(()=>o));const
o=async({actions:e})=>{const{createPage:r}=e;r({path:"/using-dsg",component:(void
0)("./src/templates/using-dsg.tsx"),context:{},defer:!0})}},{"@parcel/transformer-js/src/esmodule-helpers.js":"iuhht"}],iuhht:[function(e,r,n){n.interopDefault=function(e){return
e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,r){return
Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||r.hasOwnProperty(n)||Object.defineProperty(r,n,{enumerable:!0,get:function(){return
e[n]}})})),r},n.export=function(e,r,n){Object.defineProperty(e,r,{enumerable:!0,get:n})}},{}]},["li0r4"],"li0r4");
    |






                                                                                                                                                                                    ^

File: .cache/compiled/gatsby-node.js:1:1512



  TypeError: (void 0) is not a function
  
  - gatsby-node.js:1 Object.o
    /home/riki208/github/richardhnguyen.com/.cache/compiled/gatsby-node.js:1:1512
  
  - api-runner-node.js:462 runAPI
    [richardhnguyen.com]/[gatsby]/src/utils/api-runner-node.js:462:22
  
  - api-runner-node.js:613 Promise.catch.decorateEvent.pluginName
    [richardhnguyen.com]/[gatsby]/src/utils/api-runner-node.js:613:13
  
  - debuggability.js:384 Promise._execute
    [richardhnguyen.com]/[bluebird]/js/release/debuggability.js:384:9
  
  - promise.js:518 Promise._resolveFromExecutor
    [richardhnguyen.com]/[bluebird]/js/release/promise.js:518:18
  
  - promise.js:103 new Promise
    [richardhnguyen.com]/[bluebird]/js/release/promise.js:103:10
  
  - api-runner-node.js:611 
    [richardhnguyen.com]/[gatsby]/src/utils/api-runner-node.js:611:16
  
  - util.js:16 tryCatcher
    [richardhnguyen.com]/[bluebird]/js/release/util.js:16:23
  
  - reduce.js:166 Object.gotValue
    [richardhnguyen.com]/[bluebird]/js/release/reduce.js:166:18
  
  - reduce.js:155 Object.gotAccum
    [richardhnguyen.com]/[bluebird]/js/release/reduce.js:155:25
  
  - util.js:16 Object.tryCatcher
    [richardhnguyen.com]/[bluebird]/js/release/util.js:16:23
  
  - promise.js:547 Promise._settlePromiseFromHandler
    [richardhnguyen.com]/[bluebird]/js/release/promise.js:547:31
  
  - promise.js:604 Promise._settlePromise
    [richardhnguyen.com]/[bluebird]/js/release/promise.js:604:18
  
  - promise.js:641 Promise._settlePromiseCtx
    [richardhnguyen.com]/[bluebird]/js/release/promise.js:641:10
  
  - async.js:97 _drainQueueStep
    [richardhnguyen.com]/[bluebird]/js/release/async.js:97:12
  
  - async.js:86 _drainQueue
    [richardhnguyen.com]/[bluebird]/js/release/async.js:86:9
  

failed createPages - 0.194s

Here is the gatsby-node.ts:

import type { GatsbyNode } from "gatsby";

export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
  const { createPage } = actions;
  createPage({
    path: "/using-dsg",
    component: require.resolve("./src/templates/using-dsg.tsx"),
    context: {},
    defer: true,
  });
};

The code is completely the same as in the starter. I just migrate it to Typescript.

Reproduction Link

I don't have any reproduction since this is just my first initialization with Gatsby and Typescript

Steps to Reproduce

The error doesn't happen when I convert it back to JS version. And Gatsby does provide a suggestion for syntax highlighting while it's still in Javascript.

Expected Result

Typescript version should work like Javascript version (gatsby-node.ts)

Actual Result

See the error above

Environment

❯ npx gatsby info --clipboard

  System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.1.0/bin/npm
  Languages:
    Python: 2.7.17 - /usr/bin/python
  npmPackages:
    gatsby: ^4.15.2 => 4.15.2
    gatsby-plugin-gatsby-cloud: ^4.15.0 => 4.15.0
    gatsby-plugin-image: ^2.15.1 => 2.15.1
    gatsby-plugin-manifest: ^4.15.1 => 4.15.1
    gatsby-plugin-netlify: ^5.0.0 => 5.0.0
    gatsby-plugin-offline: ^5.15.1 => 5.15.1
    gatsby-plugin-react-helmet: ^5.15.0 => 5.15.0
    gatsby-plugin-sharp: ^4.15.1 => 4.15.1
    gatsby-source-filesystem: ^4.15.0 => 4.15.0
    gatsby-transformer-sharp: ^4.15.1 => 4.15.1
  npmGlobalPackages:
    gatsby-cli: 4.15.1
    gatsby: 4.15.2