"Cannot read property 'jsonName' of undefined" in production

[aamorozov]

Having issues with using Link from gatsby-link. Links live in nav menu and work fine on local/dev but fail to navigate in production. Tried with --prefix-paths flag and without it, and it doesn't break the page at first if excluding the flag, so the content is shown on reload but than the error is thrown. If including the --prefix-path the site fails to load resources. Deployed with surge. Please advice if anyone has experienced similar issue, thank you.

Uncaught TypeError: Cannot read property 'jsonName' of undefined
    at Object.enqueue (loader.js:154)
    at index.js:132
    at index.js:76
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (index.js:69)

gatsby-config.js

module.exports = {
  pathPrefix: `/index`,
  plugins: [
    {
      resolve: `gatsby-plugin-react-css-modules`,
      options: {
        filetypes: {
          '.scss': {syntax: `postcss-scss`},
        },
      },
    },
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        precision: 8,
      },
    },
  ]
}

items with link

            <li className={styles.item}>
              <Link {...linkProps} to={withPrefix('/')}>
                Home
              </Link>
            </li>
            <li className={styles.item}>
              <Link {...linkProps} to={withPrefix('/about/')}>
                About
              </Link>
            </li>
            <li className={styles.item}>
              <Link {...linkProps} to={withPrefix('/contact/')}>
                Contact
              </Link>
            </li>

package.json

"dependencies": {
    "classnames": "^2.2.5",
    "gatsby": "^1.9.112",
    "gatsby-link": "^1.6.27",
    "gatsby-plugin-postcss-sass": "^1.0.13",
    "gatsby-plugin-react-css-modules": "^1.0.9",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-sass": "^1.0.12",
    "include-media": "^1.4.9",
    "install": "^0.10.1",
    "jsxstyle": "^2.0.0",
    "normalize.css": "^7.0.0",
    "postcss-scss": "^1.0.2",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-helmet": "^5.2.0",
    "react-icons": "^2.2.7",
    "prop-types": "^15.6.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.1",
    "eslint": "^4.9.0",
    "eslint-config-prettier": "^2.6.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-react": "^7.4.0",
    "prettier": "^1.7.4"

pages are:

index, about, contact, 404

[KyleAMathews]

withPrefix isn't necessary for gatsby-link as it automatically handles prefixes. You use withPrefix when constructing urls to files you add manually to the site e.g. https://www.gatsbyjs.org/docs/adding-images-fonts-files/#adding-assets-outside-of-the-module-system (which docs page wasn't updated for withPrefix actually so I'll do that real quick).

[aamorozov]

@KyleAMathews Thank you for quick response! but I've tried both ways with no luck (

When i exclude the --prefix-paths flag it'll show the index page on both contact and about, but after reloading will still through that json error plus another one, although the actual content of contact or about will appear for a second.

A page wasn't found for "/contact/"

which debugs to:

    if (!page) {
        console.log(`A page wasn't found for "${path}"`)
        return cb()
      }

If i include the flag a bunch of resources are not being loaded..

[aamorozov]

Same issue as #2740, closing this ticket, will look in fixing the pathPrefix.