Build errors when importing React component from node_modules

[awolfe76]

Summary

I'm trying to import a react component from node_modules and when running gatsby build or gatsby develop I get errors.

Relevant information

I've imported hmda-ui using yarn add git://github.com/cfpb/hmda-ui-modules#gatsby. (repo branch)

I'm trying to import this into src/layouts/index.js, import { Header } from 'hmda-ui'. When using this import I see:

Error: component---src-layouts-index-js-04debe56e2a010c78b98.js from UglifyJs
  SyntaxError: Unexpected token: name (Header) [./~/hmda-ui/index.js:1,0]

I've also tried importing Header directly, import Header from 'hmda-ui/header/index.jsx'. In this case I see:

Error: ./~/hmda-ui/header/index.jsx
  Module parse failed: /Users/wolfea/Documents/projects/gatsby-site/node_modules/hmda-ui/header/index.jsx Unexpected token (13:4)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (13:4)
      at Parser.pp$4.raise (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
      at Parser.pp.unexpected (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
      at Parser.pp$3.parseExprAtom (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
      at Parser.pp$3.parseExprSubscripts (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
      at Parser.pp$3.parseMaybeUnary (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
      at Parser.pp$3.parseParenAndDistinguishExpression (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32)
      at Parser.pp$3.parseExprAtom (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
      at Parser.pp$3.parseExprSubscripts (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
      at Parser.pp$3.parseMaybeUnary (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
      at Parser.pp$3.parseExpression (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
      at Parser.pp$1.parseReturnStatement (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:839:33)
      at Parser.pp$1.parseStatement (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:699:34)
      at Parser.pp$1.parseBlock (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
      at Parser.pp$3.parseFunctionBody (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24)
      at Parser.pp$1.parseFunction (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10)
      at Parser.pp$3.parseExprAtom (/Users/wolfea/Documents/projects/gatsby-site/node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19)
   @ ./src/layouts/index.js 18:13-48

I've converted these components to ES5 but am still unable to get a build working due to the error above.

Is there a different loader required for importing react components (with JSX) from node_modules? (sorry if I'm missing something obvious).

Additionally, I've tested these components by adding a postinstall script:
"postinstall": "mkdir ./src/components/hmda-ui && cp -r ./node_modules/hmda-ui/* ./src/components/hmda-ui/"
to copy the components into the Gatsby source, src/components/ and doing that the build works great. I'd just prefer not to have that step. Of course my imports have changed in this case to import { Header } from '../components/hmda-ui' (from index.jsx) or import Header from 'hmda-ui/header/index.js' (direct import). Both cases work with the postinstall script.

So it seems like a difference between the component living in src vs node_modules?

Environment (if relevant)

• Gatsby version (npm list gatsby):
• gatsby-cli version (gatsby --version): 1.1.58
• Node.js version: 8.11.2
• Operating System: macOS Sierra 10.12.6

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: ['gatsby-plugin-react-helmet', 'gatsby-plugin-react-next'],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "1.9.250",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-react-helmet": "^2.0.10",
    "hmda-ui": "git://github.com/cfpb/hmda-ui-modules#gatsby",
    "react-helmet": "^5.2.0",
    "uswds": "^1.6.4"
  },
  "keywords": ["gatsby"],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "gatsby-plugin-react-next": "^1.0.11",
    "prettier": "^1.12.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[m-allanson]

Gatsby v1 doesn't compile code from node_modules (see #3780). I think your workaround is the best thing to do for now.

There's a plan to handle this in Gatsby v2 but it's not been implemented yet (see point 5 in #3870).

[awolfe76]

Thanks @m-allanson. We'll have to do some refactoring to get Gatsby v1 working anyway and then v2 would add to that, so I think our best bet is to wait for v2.

Looking forward to testing it out. Thanks again!