Can't export anything but string or react component w/in pages directory

[benjaminhoffman]

Here is my setup

src
   pages
      services
         index.js
         data.js

data.js:

export const someArr = []
export const someObj = {}

index.js: import { someArr, someObj } from './data'

throws this error:

which links to this: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [missing argument].[missing argument]

Observations:

1. when I delete the import {} ... line, the error is still thrown. It appears the mere presence of the data.js file is breaking things

2. when I change the exports to strings, everything works fine.

3. when I move the someArr and someObj into the index.js file, everything works fine.

Thoughts?

[KyleAMathews]

Ah yeah — any JS file under pages, Gatsby treats as a page component so it must have a default export that's a component.

Try moving data.js to src/data.js or something equivalent.

[benjaminhoffman]

hmm that's what I figured immediately after you tweeted back! Thank you!

Can I open a PR to update this page to add a third list item: https://www.gatsbyjs.org/docs/debugging-html-builds/

something like:

2. Check that any js files in your pages directory are exporting either React components or strings.  

Any JS file under pages, Gatsby treats as a page component so it must have a default export that's a component.

No worries if you don't it's necessary but would've saved me a half day of debugging.

[KyleAMathews]

That'd be super helpful! Sorry about the debugging pain :-(

[benjaminhoffman]

#2788

Let me know if this is good or I should make additional notes/changes. Feel free to close out this issue and/or merge the PR if everything looks good!

[KyleAMathews]

🥇

[JoshElias]

I like keeping files local to the components that use them. I have test files and CSS-In-JS files with some of my pages. Adding the following ignore to the gatsby-plugin-page-creator does nothing.

    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
        ignore: [`**/*.emotion.*`, `**/*.stories.js`, `**/*.test.*`],
        // See pattern syntax recognized by micromatch
        // https://www.npmjs.com/package/micromatch#matching-features
      }
    },