Gatsby: Uncaught TypeError: (0 , l.createLocation) is not a function

[rheajt]

I am getting a production error that I can't reproduce in development and it is not giving me anywhere to start troubleshooting from.

Uncaught TypeError: (0 , l.createLocation) is not a function

When I browse to one of my markdownRemark pages it loads, but the console shows:
Uncaught Error: Minified React error #130

Everything works perfectly in development. It also works with no errors when I run gatsby build and gatsby serve.

I am only getting the error when I push the public folder to my server.

Environment

Gatsby version: 1.1.24
Node.js version: 8.9.4
Operating System: Linuxmint 18

const path = require('path');

function youtubeParser(url) {
  if (!url) return '_APsUaXd980';
  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
  var match = url.match(regExp);
  return match && match[7].length === 11 ? match[7] : '_APsUaXd980';
}

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  const { createNodeField } = boundActionCreators;
  if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent);
    const date = new Date(
      fileNode.relativePath
        .split('-')
        .splice(0, 3)
        .join(',')
    );
    const youtubeId = youtubeParser(node.frontmatter.youtube);

    createNodeField({
      node,
      name: `date`,
      value: date,
    });

    createNodeField({
      node,
      name: `youtubeId`,
      value: youtubeId,
    });
  }
};

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

  const postTemplate = path.resolve('src/templates/teachertool.js');

  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            id
            html
            frontmatter {
              path
              title
            }
          }
        }
      }
    }
  `).then(res => {
    if (res.errors) {
      return Promise.reject(res.errors);
    }

    res.data.allMarkdownRemark.edges.forEach(({ node }) => {
      if (node.frontmatter.path) {
        createPage({
          path: node.frontmatter.path,
          component: postTemplate,
        });
      }
    });
  });
};

[jerroydmoore]

MAJOR EDIT: After a few more hours of investigation, I have found and fixed the cause of the error. The problem is I had another version of history (version 3.x.x) in my node_modules from a different branch, and gatsby has it's own version of history (version 4.x.x). After deleting my node_modules and running npm install, Gatsby built a valid application for me. The real source of this bug is how/why gatsby is choosing the wrong version of npm modules.

ORIGINAL (and outdated) REPLY:
I've also ran into this problem today. I cannot reproduce the error running ./node_modules/.bin/gatsby develop, but after I run ./node_modules/.bin/gatsby build --prefix-paths the version in the public folder is affected. In my code base, I invoke navigateTo(withPrefix("/download") then stepping through the code, the error seems to originate from the npm module history in the file createBrowserHistory.js, In its push method, it relies on _LocationUtils.createLocation. In the gatsby develop instance, _LocationUtils (the file LocationUtils.js in the npm history module) has a createLocation. In the deployed (minified) version, this object does have a createLocation. Here is the object signature in the minified version (copied from the Chrome devtools console):

{__esModule: true, PUSH: "PUSH", REPLACE: "REPLACE", POP: "POP"}
createHashHistory: ƒ ()
createHistory: ƒ ()
createMemoryHistory: ƒ ()
locationsAreEqual: (...)
useBasename: ƒ (t)
useBeforeUnload: ƒ (t)
useQueries: ƒ (t)
__esModule: true

This matches the signature of the index.js of the npm history module, not LocationUtils.js!
_Edit: This statement was incorrect. Upon closer examination of the index.js, it just pulls in all the other modules and functions. Also, the members of the above object weren't matching the version that gatsby was using, which led me to believe there were two versions of history being used here!_

This appears to be a gatsby or webpack error, since the minimizing process is confusing the two objects. This is appears not to be a user error. Though, it could be environmental. My colleague (who is on vacation currently) is able to build just fine. I don't have his pinned versions, but I have tried with the latest gatsby, gatsby-cli, gatsby-link, and then I downgraded to a version I thought my colleague was using (below), and am still affected by the bug.

Unfortunately, I'm blocked from performing my preproduction deployment, which is holding up testing, affecting my team's release. This is very frustrating

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 6.9.4 - ~/.nvm/versions/node/v6.9.4/bin/node
    npm: 3.10.10 - ~/.nvm/versions/node/v6.9.4/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 59.0.3
    Safari: 11.1.2
  npmPackages:
    gatsby: 1.9.273 => 1.9.273
    gatsby-cli: 1.1.58 => 1.1.58
    gatsby-link: 1.6.45 => 1.6.45
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍