Gatsby: Unable to debug cryptic error on HTML build step

[aldasmallthings]

Description

I haven't changed any of my JS / html recently, but I'm facing a gnarly bug in HTML build step that I cannot debug for the life of me. Any help is SO appreciated!

npm run dev

yields:

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: string.split is not a function

  11 | var format = function format(string) {
  12 |   return string
> 13 |     .split(' ')
     |      ^
  14 |     .map(function(s) {
  15 |       return s.replace(/^\w/, function(s) {
  16 |         return s.toUpperCase()


  WebpackError: TypeError: string.split is not a function

  - gatsby-ssr.js:13 
    node_modules/gatsby-plugin-google-fonts/gatsby-ssr.js:13:6

  - gatsby-ssr.js:24 
    node_modules/gatsby-plugin-google-fonts/gatsby-ssr.js:24:6

  - gatsby-ssr.js:36 
    node_modules/gatsby-plugin-google-fonts/gatsby-ssr.js:36:59

I scavenged online for gatsby-plugin-google-fonts (which I tried changing to the prefetch library, but could not get rid of the problem). I moved away from yarn (which I used to use towards npm) but that also didn't solve the issue.

Steps to reproduce

just run npm run dev and the error around fonts is spat out.

also, here is my package.json for details :-)

{
  "name": "aldasmallthings.com",
  "version": "1.2.1",
  "private": true,
  "description": "I'm an outcomes driven technologist.",
  "homepage": "https://aldasmallthings.com",
  "license": "MIT",
  "main": "n/a",
  "keywords": [
    "articles",
    "blog",
    "development",
    "developer",
    "programmer",
    "brazilian",
    "freelancer",
    "global-trotting",
    "designer",
    "design"
  ],
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/aldasmallthings/website.git"
  },
  "author": {
    "name": "Alda Pontes",
    "email": "[email protected]",
    "bio": "Mission driven technologist always searching for projects that enable more equitable resource distribution",
    "phone": "[phone]",
    "paypal": "aldasmallthings",
    "github": "aldasmallthings",
    "facebook": "aldasmallthings",
    "goodreads": "73406278-alda-pontes",
    "twitter": "aldasmallthings",
    "instagram": "jadumoves",
    "linkedin": "aldapontes",
    "spotify": "5v58oXi7rrWzqeqw8mlOb8?si=_QU4PpumReGHtsKgIN1KDA",
    "npm": "~aldasmallthings.com"
  },
  "bugs": {
    "url": "https://github.com/aldasmallthings/website/issues"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ],
  "scripts": {
    "dev": "npm run clean && gatsby develop -H 0.0.0.0 -p 8000",
    "dev:q": "NODE_ENV=development DEBUG=gatsby:query-watcher npm run dev",
    "build": "npm run clean && gatsby build",
    "deploy": "npm run build && netlify deploy --prod",
    "eslint": "eslint \"./**/*.{js,jsx}\"",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "serve": "npm run build && gatsby serve",
    "watch": "npm run dev",
    "start": "npm run dev",
    "clean": "rm -rf .cache/ public/",
    "test": "echo \"Write tests!"
  },
  "dependencies": {
    "@jimp/custom": "^0.16.1",
    "@raae/gatsby-remark-oembed": "^0.1.1",
    "array-flatten": "^3.0.0",
    "dotenv": "^8.0.0",
    "formik": "^2.2.5",
    "gatsby": "^2.19.28",
    "gatsby-cli": "^2.13.1",
    "gatsby-image": "^2.2.42",
    "gatsby-plugin-canonical-urls": "^2.1.20",
    "gatsby-plugin-favicon": "^3.1.6",
    "gatsby-plugin-feed": "^2.3.27",
    "gatsby-plugin-google-analytics": "^2.1.36",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.2.42",
    "gatsby-plugin-offline": "^2.2.5",
    "gatsby-plugin-react-helmet": "^3.1.22",
    "gatsby-plugin-sharp": "^2.4.5",
    "gatsby-plugin-sitemap": "^2.2.27",
    "gatsby-plugin-stylus": "^2.1.21",
    "gatsby-plugin-typography": "^2.3.22",
    "gatsby-remark-autolink-headers": "^2.1.24",
    "gatsby-remark-copy-linked-files": "^2.1.37",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^3.1.44",
    "gatsby-remark-normalize-paths": "^1.0.0",
    "gatsby-remark-prismjs": "^3.3.32",
    "gatsby-remark-reading-time": "^1.0.1",
    "gatsby-remark-responsive-iframe": "^2.2.32",
    "gatsby-source-filesystem": "^2.1.48",
    "gatsby-source-mailchimp": "^0.7.0",
    "gatsby-transformer-remark": "^2.6.53",
    "gatsby-transformer-sharp": "^2.3.16",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.5",
    "lodash.kebabcase": "^4.1.1",
    "node-addon-api": "^3.0.2",
    "prismjs": "^1.19.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
    "react-instagram-feed": "^0.1.3-alpha",
    "react-medium-image-zoom": "^3.1.1",
    "react-social-sharing": "^3.0.1",
    "rupture": "^0.7.1",
    "sharp": "^0.26.3",
    "slash": "^2.0.0",
    "slugify": "^1.4.0",
    "whatsapp-url": "^0.0.4"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^5.15.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-standard": "^4.0.0"
  }
}

Expected result

The project should build.

Actual result

The error above is spat out.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    Yarn: Warning: Resolving node version range "latest" is slower than providing an exact version.
Warning: Resolving yarn version range "latest" is slower than providing an exact version.
Downloading yarn v1.22.10 to /Users/alda.pontes/.hnvm/yarn
Using Hermetic NodeJS v15.2.1
1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.198
    Safari: 14.0
  npmPackages:
    gatsby: ^2.19.28 => 2.26.1 
    gatsby-cli: ^2.13.1 => 2.13.1 
    gatsby-image: ^2.2.42 => 2.5.0 
    gatsby-plugin-canonical-urls: ^2.1.20 => 2.4.0 
    gatsby-plugin-favicon: ^3.1.6 => 3.1.6 
    gatsby-plugin-feed: ^2.3.27 => 2.7.0 
    gatsby-plugin-google-analytics: ^2.1.36 => 2.5.0 
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 
    gatsby-plugin-manifest: ^2.2.42 => 2.6.1 
    gatsby-plugin-offline: ^2.2.5 => 2.2.10 
    gatsby-plugin-react-helmet: ^3.1.22 => 3.4.0 
    gatsby-plugin-sharp: ^2.4.5 => 2.8.0 
    gatsby-plugin-sitemap: ^2.2.27 => 2.6.0 
    gatsby-plugin-stylus: ^2.1.21 => 2.4.0 
    gatsby-plugin-typography: ^2.3.22 => 2.6.0 
    gatsby-remark-autolink-headers: ^2.1.24 => 2.5.0 
    gatsby-remark-copy-linked-files: ^2.1.37 => 2.4.0 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.1.44 => 3.5.1 
    gatsby-remark-normalize-paths: ^1.0.0 => 1.1.0 
    gatsby-remark-prismjs: ^3.3.32 => 3.7.0 
    gatsby-remark-reading-time: ^1.0.1 => 1.1.0 
    gatsby-remark-responsive-iframe: ^2.2.32 => 2.5.0 
    gatsby-source-filesystem: ^2.1.48 => 2.5.0 
    gatsby-source-mailchimp: ^0.7.0 => 0.7.0 
    gatsby-transformer-remark: ^2.6.53 => 2.10.0 
    gatsby-transformer-sharp: ^2.3.16 => 2.6.0 
  npmGlobalPackages:
    gatsby-cli: 2.13.1

[KyleAMathews]

Does it work if you disable the plugin? You can also add a console.log into the plugin to see what data is being passed to the function.

[aldasmallthings]

It does work, but then my fonts don't... has anyone else had this issue recently when using google fonts <> gatsby?

[ascorbic]

Hi @aldasmallthings
As you cannot reproduce this without the plugin, it sounds like the plugin is the issue. Could you open an issue on the plugin repo, as they will be more able to handle it. Thanks!

[hiyour]

@aldasmallthings I got this issue and realised it was because I switch from 'gatsby-plugin-prefetch-google-fonts' to 'gatsby-plugin-google-fonts' without realising the fonts options are supposed to be declared as strings instead of objects. Just check your plugin options and ensure that all the font declaration are done as strings.