ERROR #95313 when running gatsby build

dwyn commented 5 years ago

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: harmon.dwayne@gmail.com, 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": "harmon.dwayne@gmail.com", "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 ( <ThemeContext.Provider value={{ theme, setTheme }}

{children} </ThemeContext.Provider> ); };

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 ( <ThemeContext.Provider value={{ theme, setTheme }}

{children} </ThemeContext.Provider> ); };

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

LekoArts commented 5 years ago

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

dwyn commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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'
        ],
      },
    },

acushlakoncept commented 3 years ago

Thank you @rense the solution worked for me.

joetm commented 2 years ago

Running "gatsby clean" before the build fixes this error for me, although it does not seem related to fonts in my case.

CsAlkemy commented 1 year ago

Just remove all of your lazy import from your project

const Component = React.lazy(() => import("../Common/component"))

Remove it Also you need to remove Suspense

<Suspense fallback={<Loader />}></Suspense>

This will solve your issue.

N.B: Gatsby doesn't need any lazy loading

gatsbyjs / gatsby