My file is failing right at the very first line, import React from "react", with a TypeError: Object(...) is not a function

Question

I'm working with the basic Gatsby starter site and it compiles just fine, but the browser just shows the error mentioned in the title as well as a couple warnings.

It's probably important to note that the error is gone when I completely remove the StaticQuery piece so the IndexPage component is just the opening and closing Layout tags. This gets rid of the error and the browser shows the header+footer of the Gatsby starter site.

I've made sure that my versions of react and react-dom are up to date in the package.json, I've reinstalled the packages via npm install, I've tried other versions of react, nothing is working.

The file that is failing (index.js):

import React from "react"
import { StaticQuery, GraphQL, Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <StaticQuery query={GraphQL`{
        allWordpressPage {
          edges {
            node {
              id
              title
              content
            }
          }
        }
      }`} render={props => (
        <div> {props.allWordpressPage.edges.map(page => (
          <div key={page.node.id}>
            <h1>
              {page.node.title}
            </h1>
            <div dangerouslySetInnerHTML={{__html: page.node.content}} />
          </div>
        ))}
        </div>
      )}
    />
  </Layout>
)

export default IndexPage

The error and warnings that show in browser:

TypeError: Object(...) is not a function
IndexPage
src/pages/index.js:1
> 1 | import React from "react"
  2 | import { Link } from "gatsby"
  3 | 
  4 | import Layout from "../components/layout"
View compiled
▶ 17 stack frames were collapsed.
JSONStore._this.handleMittEvent
/Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/.cache/json-store.js:1
> 1 | import React from "react"
  2 | 
  3 | import PageRenderer from "./page-renderer"
  4 | import normalizePagePath from "./normalize-page-path"
View compiled
▶ 2 stack frames were collapsed.
r.<anonymous>
/Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/.cache/socketIo.js:20
  17 | // Try to initialize web socket if we didn't do it already
  18 | try {
  19 |   // eslint-disable-next-line no-undef
> 20 |   socket = io()
  21 | 
  22 |   const didDataChange = (msg, queryData) => {
  23 |     const id =
View compiled
▶ 24 stack frames were collapsed.

Just checked and everything imported without { } is being exported as default. I also removed the unused imports just to be sure and I'm still getting the same error with the first line, import react from "React". — Kennan, Jul 26 '19 at 15:35
Try `import { StaticQuery, GraphQL, Link } from "gatsby"`. Right now you are importing from `gatsby` at two places. — Arslan Tariq, Jul 26 '19 at 15:53
Tried that already and it didn't make any difference. I have it all in one import now, just to be safe, but the problem is still there. I'll update the question to reflect this. — Kennan, Jul 26 '19 at 16:18
Hmm that's very odd but look at this https://stackoverflow.com/questions/4026891/javascript-uncaught-typeerror-object-is-not-a-function-associativity-question — Arslan Tariq, Jul 26 '19 at 16:26
Interesting. This is very good to know. I went through and manually added semicolons where they belong, but it turns out that the issue was actually that I was using "GraphQL" instead of "graphql". After I changed all instances of this to the lowercase version, the page started working again. — Kennan, Jul 26 '19 at 16:43

score 0 · Answer 1 · answered Jul 26 '19 at 15:28

0

Maybe these imports are not the default ones?

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

check if they ere exported as default, otherwise you shuld use {} import

answered Jul 26 '19 at 15:28

Emanuele Scarabattoli

4,103
1
12
21

Just checked and they are exported as default. I also tested my site after removing the Image and SEO imports since I wasn't using them and I still get the same error for the first line, importing react. – Kennan Jul 26 '19 at 15:34

score 0 · Accepted Answer · answered Jul 26 '19 at 16:41

0

Ok, got it working again.

The issue was that I was using GraphQL instead of graphql. The case-sensitivity was throwing the whole thing off. Replacing both instances of GraphQL with graphql fixed the issue and now I am seeing my data rendered on the page as intended.

answered Jul 26 '19 at 16:41

Kennan

23
6

1

Hey. Glad you were able to figure out the issue. Please mark this as the accepted answer, even though it's your own. This will help others when they arrive here looking for a solution to a similar issue. Cheers! – Shishir Jul 27 '19 at 07:18

My file is failing right at the very first line, import React from "react", with a TypeError: Object(...) is not a function

2 Answers2