Gatsby: ERROR #95313 when running gatsby build

[dwyn]

Summary

When I run gatsby build I get this error, and quite frankly I have no idea on where to start debugging.

Relevant information

Here is my repo: https://github.com/dwyn/dwayne.FM.Frontend

I did switch from gatsby-plugin-prefetch-google-fonts to gatsby-plugin-google-fonts and that's when the ERROR #95313 started. (I switched packages because the prefetch was throwing an odd error as well.)

The error is specifically

ERROR #95313 

Building static HTML failed for path "/offline-plugin-app-shell-fallback/"

See our docs page for more info on this error: https://gatsby.dev/debug-html



  TypeError: string.split is not a function

  - render-page.js:6477 format
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:6477:229

  - Array.map

  - render-page.js:6477 getFonts
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:6477:393

  - render-page.js:6477 Object../node_modules/gatsby-plugin-google-fonts/gatsby-ssr.js.exports.onRenderBody
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:6477:660

  - render-page.js:120 
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:120:107

  - Array.map

  - render-page.js:120 ./.cache/api-runner-ssr.js.module.exports
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:120:21

  - render-page.js:553 Module../.cache/static-entry.js.__webpack_exports__.default
    /Users/dwyn/Development/code.2/dwayne.FM.Frontend/public/render-page.js:553:232

  - render-html.js:35 
    [dwayne.FM.Frontend]/[gatsby]/dist/utils/worker/render-html.js:35:36

  - debuggability.js:313 Promise._execute
    [dwayne.FM.Frontend]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:488 Promise._resolveFromExecutor
    [dwayne.FM.Frontend]/[bluebird]/js/release/promise.js:488:18

  - promise.js:79 new Promise
    [dwayne.FM.Frontend]/[bluebird]/js/release/promise.js:79:10

  - render-html.js:31 
    [dwayne.FM.Frontend]/[gatsby]/dist/utils/worker/render-html.js:31:37

  - util.js:16 tryCatcher
    [dwayne.FM.Frontend]/[bluebird]/js/release/util.js:16:23

  - map.js:61 MappingPromiseArray._promiseFulfilled
    [dwayne.FM.Frontend]/[bluebird]/js/release/map.js:61:38

  - promise_array.js:114 MappingPromiseArray.PromiseArray._iterate
    [dwayne.FM.Frontend]/[bluebird]/js/release/promise_array.js:114:31

Environment (if relevant)

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.0.0 - ~/.nvm/versions/node/v12.0.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v12.0.0/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 76.0.3809.132
Firefox: 69.0
Safari: 12.1.2
npmPackages:
gatsby: ^2.2.9 => 2.13.39
gatsby-image: ^2.0.34 => 2.2.6
gatsby-plugin-catch-links: ^2.0.13 => 2.1.2
gatsby-plugin-feed: ^2.1.0 => 2.3.5
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-google-tagmanager: ^2.0.10 => 2.1.4
gatsby-plugin-manifest: ^2.0.24 => 2.2.4
gatsby-plugin-offline: ^2.0.25 => 2.2.4
gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2
gatsby-plugin-react-helmet: ^3.0.10 => 3.1.2
gatsby-plugin-sass: ^2.0.11 => 2.1.3
gatsby-plugin-sharp: ^2.0.30 => 2.2.9
gatsby-plugin-sitemap: ^2.0.10 => 2.2.3
gatsby-remark-a11y-emoji: ^1.0.0 => 1.0.0
gatsby-remark-autolink-headers: ^2.0.16 => 2.1.3
gatsby-remark-copy-linked-files: ^2.0.11 => 2.1.3
gatsby-remark-embed-video: ^1.7.1 => 1.7.1
gatsby-remark-external-links: ^0.0.4 => 0.0.4
gatsby-remark-images: ^3.0.10 => 3.1.7
gatsby-remark-katex: ^3.0.4 => 3.1.2
gatsby-remark-prismjs: ^3.2.6 => 3.3.3
gatsby-remark-responsive-iframe: ^2.1.1 => 2.2.4
gatsby-remark-smartypants: ^2.0.9 => 2.1.2
gatsby-source-filesystem: ^2.0.28 => 2.1.6
gatsby-source-graphql: ^2.1.12 => 2.1.12
gatsby-transformer-remark: ^2.3.8 => 2.6.9
gatsby-transformer-sharp: ^2.1.17 => 2.2.4
npmGlobalPackages:
gatsby-cli: 2.7.47

File contents (if changed)

gatsby-config.js:
module.exports = {
siteMetadata: {
title: dwayne.fm,
author: dwayne.,
email: [email protected],
description: Musings, Music, Modern Day Hieroglyphs,
siteUrl: https://dwayne.fm,
siteDomain: dwayne.fm,
language: en,
disqusShortname: n/a,
social: {
instagram: dwyn,
facebook: dwayne,
linkedin: dwayneharmon,
twitter: dwyn,
github: dwyn
},
keywords: [
dwayne,
harmon,
flatiron school,
black,
engineer,
developer,
artist,
blog,
gatsby,
javascript,
js,
react,
reactjs,
html,
html5,
css,
css3
]
},
pathPrefix: /,
plugins: [
{
resolve: gatsby-source-filesystem,
options: {
path: ${__dirname}/content/blog,
name: blog,
ignore: [**/\.*] // ignore files starting with a dot
}
},
{
resolve: gatsby-source-filesystem,
options: {
path: ${__dirname}/content/assets,
name: assets
}
},
{
resolve: gatsby-transformer-remark,
options: {
plugins: [
{
resolve: gatsby-remark-images,
options: {
maxWidth: 1400,
linkImagesToOriginal: false,
withWebp: {
quality: 80
},
wrapperStyle: fluidResult =>
flex:${Math.round(fluidResult.aspectRatio, 2)};
}
},
gatsby-remark-embed-video,
{
resolve: gatsby-remark-responsive-iframe,
options: {
wrapperStyle: margin-bottom: 1.0725rem
}
},
gatsby-remark-autolink-headers,
gatsby-remark-external-links,
gatsby-remark-copy-linked-files,
gatsby-remark-smartypants,
gatsby-remark-a11y-emoji,
{
resolve: gatsby-remark-prismjs,
options: {
showLineNumbers: true,
noInlineHighlight: true
}
},
{
resolve: gatsby-remark-katex,
options: {
strict: ignore
}
}
]
}
},
gatsby-plugin-sass,
gatsby-transformer-sharp,
gatsby-plugin-sharp,
{
resolve: gatsby-plugin-google-tagmanager,
options: {
id: process.env.GTM_ID
}
},
{
resolve: gatsby-plugin-feed,
options: {
feeds: [
{
query: { allMarkdownRemark( limit: 1000, sort: { order: DESC, fields: [frontmatter___date] } filter: { frontmatter: { draft: { ne: true } } } ) { edges { node { excerpt html fields { slug } frontmatter { title date description tags } } } } } ,
output: '/rss.xml',
setup: ({
query: {
site: { siteMetadata }
}
}) => {
return {
title: siteMetadata.title,
description: siteMetadata.description,
language: siteMetadata.language,
categories: siteMetadata.keywords,
feed_url: siteMetadata.siteUrl + /rss.xml,
site_url: siteMetadata.siteUrl,
image_url: siteMetadata.siteUrl + /icons/icon-144x144.png,
managingEditor: ${siteMetadata.email} (${ siteMetadata.author }),
webMaster: ${siteMetadata.email} (${siteMetadata.author}),
generator: GatsbyJS
};
},
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.edges.map(edge => {
return Object.assign({}, edge.node.frontmatter, {
description:
edge.node.frontmatter.description || edge.node.excerpt,
author: site.siteMetadata.author,
categories: Array.from(
new Set([
...(site.siteMetadata.keywords || []),
...(edge.node.frontmatter.tags || [])
])
),
url: site.siteMetadata.siteUrl + edge.node.fields.slug,
guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
custom_elements: [{ 'content:encoded': edge.node.html }]
});
});
}
}
],
query: { site { siteMetadata { title author email description language siteUrl keywords } } }
}
},
{
resolve: gatsby-plugin-google-fonts,
// resolve: gatsby-plugin-prefetch-google-fonts,
options: {
fonts: [
{
family: Quicksand,
variants: [300, 400, 500, 700]
}
]
}
},
gatsby-plugin-sitemap,
{
resolve: gatsby-plugin-manifest,
options: {
name: Dev Blog by Dennis Morello,
short_name: Dev Blog,
start_url: /,
background_color: #ffffff,
theme_color: #363636,
display: minimal-ui,
icon: content/assets/logo-1024.png,
include_favicon: true,
crossOrigin: use-credentials
}
},
gatsby-plugin-offline,
gatsby-plugin-react-helmet,
gatsby-plugin-catch-links,

// test for gatsby-source-graphql
// {
//   resolve: 'gatsby-source-graphql',
//   options: {
//     typeName: "User", // This type will contain remote schema Query type
//     fieldName: "users", // This is field under which it's accessible
//     url: "http://localhost:3000/graphql", // Url to query from
//   },
// }

]
};

---

package.json:
{
"name": "dwayne.fm",
"private": true,
"description": "Music. Musings. Modern Day Heiroglyphs",
"version": "0.1.0",
"author": {
"email": "[email protected]",
"name": "dwayne.",
"url": "https://dwayne.fm"
},
"bugs": {
"url": "https://gitlab.com/"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.8.1",
"bloomer": "^0.6.5",
"bulma": "^0.7.4",
"disqus-react": "^1.0.5",
"gatsby": "^2.2.9",
"gatsby-image": "^2.0.34",
"gatsby-plugin-catch-links": "^2.0.13",
"gatsby-plugin-feed": "^2.1.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-google-tagmanager": "^2.0.10",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-prefetch-google-fonts": "^1.4.2",
"gatsby-plugin-react-helmet": "^3.0.10",
"gatsby-plugin-sass": "^2.0.11",
"gatsby-plugin-sharp": "^2.0.30",
"gatsby-plugin-sitemap": "^2.0.10",
"gatsby-remark-a11y-emoji": "^1.0.0",
"gatsby-remark-autolink-headers": "^2.0.16",
"gatsby-remark-copy-linked-files": "^2.0.11",
"gatsby-remark-embed-video": "^1.7.1",
"gatsby-remark-external-links": "^0.0.4",
"gatsby-remark-images": "^3.0.10",
"gatsby-remark-katex": "^3.0.4",
"gatsby-remark-prismjs": "^3.2.6",
"gatsby-remark-responsive-iframe": "^2.1.1",
"gatsby-remark-smartypants": "^2.0.9",
"gatsby-source-filesystem": "^2.0.28",
"gatsby-source-graphql": "^2.1.12",
"gatsby-transformer-remark": "^2.3.8",
"gatsby-transformer-sharp": "^2.1.17",
"katex": "^0.10.1",
"node-sass": "^4.11.0",
"prismjs": "^1.15.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-helmet": "^5.2.0",
"react-reveal": "^1.2.2",
"react-spring": "^8.0.18",
"react-typist": "^2.0.5"
},
"devDependencies": {
"prettier": "^1.16.4"
},
"homepage": "https://gitlab.com/dennismorello/dev-blog#readme",
"keywords": [
"dennis",
"morello",
"blog",
"gatsby",
"javascript",
"js",
"react",
"reactjs",
"html",
"html5",
"css",
"css3"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"develop:lan": "gatsby develop -o -H $HOSTNAME -p 8000",
"clean": "gatsby clean",
"format": "prettier --write src/*/.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
}
}

---

gatsby-node.js:
const path = require(path);
const { createFilePath } = require(gatsby-source-filesystem);

exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions;

const blogPost = path.resolve(./src/templates/blog-post.js);
return graphql(
{ allMarkdownRemark( limit: 1000 sort: { fields: [frontmatter___date], order: DESC } filter: { frontmatter: { draft: { ne: true } } } ) { edges { node { fields { slug } frontmatter { title } } } } }
).then(result => {
if (result.errors) {
throw result.errors;
}

// Create blog posts pages.
const posts = result.data.allMarkdownRemark.edges;

posts.forEach((post, index) => {
  const previous =
    index === posts.length - 1 ? null : posts[index + 1].node;
  const next = index === 0 ? null : posts[index - 1].node;

  createPage({
    path: post.node.fields.slug,
    component: blogPost,
    context: {
      slug: post.node.fields.slug,
      previous,
      next
    }
  });
});

});
};

exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions;

if (node.internal.type === MarkdownRemark) {
const value = createFilePath({ node, getNode });
createNodeField({
name: slug,
node,
value
});
}
};

---

gatsby-browser.js:
import React from 'react';

// Hooks
import { useLocalStorage } from './src/hooks/local-storage';

// Font Awesome
import '@fortawesome/fontawesome-free/css/all.min.css';

// Global Style
import './src/styles/index.scss';

// Typist CSS
import 'react-typist/dist/Typist.css';

// Prism.js Theme
import 'prismjs/themes/prism-okaidia.css';

// Contexts
import { ThemeContext } from './src/contexts/theme';

const App = ({ children }) => {
const [theme, setTheme] = useLocalStorage('theme', 'light');

return (
value={{
theme,
setTheme
}}
>
{children}

);
};

export const wrapRootElement = ({ element }) => {
return {element};
};

---

gatsby-ssr.js:
import React from 'react';

// Hooks
import { useLocalStorage } from './src/hooks/local-storage';

// Contexts
import { ThemeContext } from './src/contexts/theme';

const App = ({ children }) => {
const [theme, setTheme] = useLocalStorage('theme', 'light');

return (
value={{
theme,
setTheme
}}
>
{children}

);
};

export const wrapRootElement = ({ element }) => {
return {element};
};

[LekoArts]

Please update all your packages to the latest versions, including upgrading the offline plugin to v3 and report back if that helped. Thanks!

[dwyn]

Hey @lekoarts! Thanks for getting back to me!

Ive updated all packages, the Gatsby CLI and retried gatsby build. I received the following error:

 ERROR #95313 

Building static HTML failed for path "/offline-plugin-app-shell-fallback/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  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 format
    node_modules/gatsby-plugin-google-fonts/gatsby-ssr.js:13:6

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

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

[andrico1234]

It's likely not going to be helpful at all, but I ran into this same issue right now. I ran gatsby clean, then tried a rebuild and it worked a treat.

Again, I know it's likely not helpful, but it could be worth a shot if on the off chance you haven't cleaned the cache and build folder in a while.

[dwyn]

Hey @andrico1234, thanks for your suggestion! I gave it a try but alas I am still receiving ERROR #95313 when I run gatsby build.

[andrico1234]

Are there any earlier versions of the gatsby-plugin-google-fonts that work with gatsby build? If so it could point to a specific commit that ended up breaking your build. Also, is there a specific order that the plugins need to be run to ensure a successful build?

I know that the offline plugin is recommended to be placed at the end though, so I'm not sure if this applicable for you.

[iDVB]

I'm also getting the same error during build. When I seach my whole repo, I can't find a single reference to offline-plugin-app-shell-fallback.

I believe I'm using all the latest modules....

    "@material-ui/core": "^4.4.2",
    "@material-ui/icons": "^4.4.1",
    "@sindresorhus/slugify": "^0.10.0",
    "algoliasearch": "^3.32.1",
    "axios": "^0.19.2",
    "crypto": "^1.0.1",
    "dotenv": "^8.2.0",
    "eslint-plugin-react-hooks": "^2.3.0",
    "formik": "^1.5.8",
    "gatsby": "^2.19.8",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-algolia": "^0.5.0",
    "gatsby-plugin-feed": "^2.3.26",
    "gatsby-plugin-google-analytics": "^2.1.34",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-plugin-styled-components": "^3.1.18",
    "gatsby-plugin-typography": "^2.3.21",
    "gatsby-remark-copy-linked-files": "^2.1.36",
    "gatsby-remark-images": "^3.1.42",
    "gatsby-remark-normalize-paths": "^1.0.0",
    "gatsby-remark-prismjs": "^3.3.30",
    "gatsby-remark-responsive-iframe": "^2.2.31",
    "gatsby-remark-smartypants": "^2.1.20",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "json-schema-to-yup": "^1.8.8",
    "lodash.kebabcase": "^4.1.1",
    "prismjs": "^1.15.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-helmet": "^5.2.0",
    "react-instantsearch-dom": "^6.2.0",
    "react-typography": "^0.16.13",
    "styled-components": "^5.0.0",
    "styled-icons": "^9.2.0",
    "typography": "^0.16.17",
    "uuid": "^3.3.2"

[iDVB]

I think my issue was that I was using GlobalStyle in both gatsby-browser.js and gatsby-ssr.js.
I moved it to Layout.js and now it works.

https://github.com/gatsbyjs/gatsby/issues/5997#issuecomment-579439687

[vietvudanh]

I have updated all packages to newest version but still have this problem. It's frustrating when it happened suddenly.

"firebase-tools": "^8.4.3",
    "gatsby": "^2.23.11",
    "gatsby-image": "^2.4.9",
    "gatsby-plugin-google-analytics": "^2.3.6",
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^2.2.10",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-source-filesystem": "^2.3.14",
    "gatsby-transformer-json": "^2.4.7",
    "gatsby-transformer-sharp": "^2.5.7",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0"

Update: after dig down a bit in the core code, I find this trace. gatsby hide a lot of details so finding the cause is hard. I don't understand webpack so finding the cause is not possible. Why throwing error in public/render-page.js? Isn't it the output of the buildingHTML process?

TypeError: path.startsWith is not a function
    at isLocalLink (<local_dir>public/render-page.js:1530:24)
    at rewriteLinkPath (<local_dir>public/render-page.js:1547:8)
    at <local_dir>public/render-page.js:1683:24
    at Object.children (<local_dir>node_modules/@reach/router/index.js:61:24)
    at a.b.render (<local_dir>node_modules/react-dom/cjs/react-dom-server.node.production.min.js:47:125)
    at a.b.read (<local_dir>node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
    at renderToString (<local_dir>node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
    at Module../.cache/static-entry.js.__webpack_exports__.default (<local_dir>public/render-page.js:610:28)
    at <local_dir>node_modules/gatsby/dist/utils/worker/render-html.js:28:36
    at Promise._execute (<local_dir>node_modules/bluebird/js/release/debuggability.js:384:9)
    at Promise._resolveFromExecutor (<local_dir>node_modules/bluebird/js/release/promise.js:518:18)
    at new Promise (<local_dir>node_modules/bluebird/js/release/promise.js:103:10)
    at <local_dir>node_modules/gatsby/dist/utils/worker/render-html.js:24:47
    at tryCatcher (<local_dir>node_modules/bluebird/js/release/util.js:16:23)
    at MappingPromiseArray._promiseFulfilled (<local_dir>node_modules/bluebird/js/release/map.js:68:38)
    at MappingPromiseArray.PromiseArray._iterate (<local_dir>node_modules/bluebird/js/release/promise_array.js:115:31)

Update 2: My problem was using number instead string for to props in Link component, it does not work in newer versions. I wish Gatsby would throw a better error. I have to guess a couple of times to find this.

[JamesDelfini]

I'm new with Gatsby but it seems this error means, there is something wrong with your code on the path.

There is one exception when the path is being told as an error but it turns out all the code in there are fine. The error outputted different path after doing a clean up on my environment by deleting node modules, package.json.lock/yarn.lock, and build folders. You can also try upgrading your packages if it still fails.

[bhaktatejas922]

Hey @dwyn did you ever figure this out? If so, what was the issue? Same exact issue here when switching from switch from gatsby-plugin-prefetch-google-fonts to gatsby-plugin-google-fonts

[rense]

The solution is in this issue

The options syntax for gatsby-plugin-google-fonts differs from the deprecated one:

{
      resolve: 'gatsby-plugin-google-fonts',
      options: {
        fonts: [
          'Lato\:400,700',
          'Montserrat\:400,500,600,700',
          'Nunito\:400,600,700',
          'Open Sans\:400,600,700',
          'Raleway\:400,500,700',
          'Rubik\:400,500,700',
          'Source Sans Pro\:400,500,700',
          'Titillium Web\:400,600,700'
        ],
      },
    },