Gatsby: Unexpected token - gatsby-plugin-react-helmet

[Kosai106]

Description

When using gatsby-plugin-react-helmet & react-helmet, I get a syntax error.
The odd thing is that it worked just fine last week, and I can't seem to figure out why it suddenly stopped.

Code

// ./src/templates/index.js
import React from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';

import Layout from 'layouts';

export default ({ pageContext, data }) => {
  const { title, meta, components } = pageContext.data;
  return (
    <Layout>
      <Helmet bodyAttributes={{ class: 'no-outlines' }}>
        <title>
          {data.site.siteMetadata.title} {title}
        </title>
      </Helmet>
      {/* ... content */}
    </Layout>
  );
};

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

Result

./src/templates/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/oesterkilde/Projects/react-landing-builder/src/templates/index.js: Unexpected token (13:55)

  11 |   return (
  12 |     <Layout>
> 13 |       <Helmet bodyAttributes={{ class: 'no-outlines' }}>
     |                                                        ^
  14 |         <title>
  15 |           {data.site.siteMetadata.title} {title}
  16 |         </title>
    at _class.raise (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3939:15)
    at _class.unexpected (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5248:16)
    at _class.jsxParseIdentifier (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3418:14)
    at _class.jsxParseNamespacedName (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3428:23)
    at _class.jsxParseAttribute (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3511:24)
    at _class.jsxParseOpeningElementAfterName (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3532:30)
    at _class.jsxParseOpeningElementAt (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3525:19)
    at _class.jsxParseElementAt (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3557:33)
    at _class.jsxParseElementAt (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3573:34)
    at _class.jsxParseElement (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3626:19)
    at _class.parseExprAtom (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:3633:21)
    at _class.parseExprSubscripts (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5924:21)
    at _class.parseMaybeUnary (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5903:21)
    at _class.parseExprOps (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5812:21)
    at _class.parseMaybeConditional (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5784:21)
    at _class.parseMaybeAssign (/Users/oesterkilde/Projects/react-landing-builder/node_modules/@babel/parser/lib/index.js:5731:21)

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.11.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 61.0.2
    Safari: 12.0
  npmPackages:
    gatsby: next => 2.0.0-rc.28 
    gatsby-plugin-emotion: ^2.0.0-rc.5 => 2.0.5 
    gatsby-plugin-manifest: next => 2.0.2-rc.1 
    gatsby-plugin-offline: next => 2.0.0-rc.9 
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 
    gatsby-plugin-resolve-src: next => 2.0.0-beta.1 
    gatsby-source-filesystem: ^1.5.39 => 1.5.39 
    gatsby-transformer-json: ^1.0.20 => 1.0.20 

[pieh]

Maybe it's because of class which is reserved keyword - can you try className and if that works?

[Kosai106]

@pieh Actually... That makes it compile again. 🤔
However now in the compiled output, my body element looks like

<body classname="no-outlines">

rather than

<body class="no-outlines">

Again, I'd like to note that this _used_ to work just last week.

[pieh]

So this is more of react-helmet question at this point - but maybe instead of using

<Helmet bodyAttributes={{ class: 'no-outlines' }}>
````
You could use something like this:

```

I saw they show this usage in reference guide

[pieh]

or maybe just wrap class property name in quotes (unless your formatter will strip that automatically)?

[Kosai106]

@pieh I already tried with quotes, but indeed Prettier removes them.

And I know it's more of a react-helmet question, however it used to work in gatsby, which is why I'm asking it here.

That being said, your suggestion with the body tag did work. Thank you!