Error using tagged template literal styles with gatsby-plugin-astroturf

[ryexley]

Happy to move this question somewhere else if this isn't the appropriate place, but I didn't see any issues or activity in the gatsby-plugin-astroturf repository, so figured I'd start here.

I'm trying to use astroturf with gatsby, and it seems to be configured correctly for general use, but I ran into a problem when attempting to add tags to a block of template literal CSS, and wondered if anyone here might've run into a similar issue, as I can't seem to figure out how to fix it (if it can be fixed).

Default Gatsby project template, trying to create a basic component that imports an image from a local file, which converts it to a data uri. Trying to dynamically add that data uri as the url value for a background-image property like this:

const myImageUrl = "data:image/svg+xml;base64,PCEtLSBCeSBTYW0gSGVyYmVy…0ZSIgLz4KICAgIDwvY2lyY2xlPgogIDwvZz4KPC9zdmc+Cg=="

const styles = css`
  .loadingIndicator {
    align-items: center;
    display: flex;
    height: auto;
    margin: 0;
    transition: all 0.5s;

    &::before {
      background-image: url(${myImageUrl});
      background-size: contain;
      border: 1px dashed #eee;
      content: "";
      display: block;
      height: 1.5rem;
      margin-right: 0.5rem;
      text-indent: -625rem;
      width: 1.5rem;
    }

    &[style*="display: none;"] {
      height: 0;
      opacity: 0;
      padding: 0;
      pointer-events: none;
      user-select: none;
      visibility: visible;
    }
  }

  .label {
    margin: 0;
  }
`

When gatsby attempts to compile that, I get the following error:

success Re-building development bundle - 0.262s
success extract queries from components - 0.045s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

/Users/me/projects/my/project/name/src/components/loading-indicator/index.js: Cannot read property 'name' of undefined

File: src/components/loading-indicator/index.js

failed Re-building development bundle - 0.212s

 ERROR

UNHANDLED REJECTION Cannot read property 'find' of undefined



  TypeError: Cannot read property 'find' of undefined

  - loader.js:190 dependencies.push.buildDependency.then.module
    [my-project-name]/[astroturf]/loader.js:190:35

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

This is my gatsby-config.js, after I added astroturf, gatsby-plugin-astroturf, gatsby-plugin-postcss and postcss-nested as dependencies to the project:

module.exports = {
  siteMetadata: {
    title: "My Project Name",
    description: "My Project Description",
    author: "@ryexley"
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images`
      }
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "gatsby-starter-default",
        short_name: "starter", // eslint-disable-line camelcase
        start_url: "/", // eslint-disable-line camelcase
        background_color: "#663399", // eslint-disable-line camelcase
        theme_color: "#663399", // eslint-disable-line camelcase
        display: "minimal-ui",
        icon: "src/images/gatsby-icon.png" // This path is relative to the root of the site.
      }
    },
    {
      resolve: "gatsby-plugin-postcss",
      options: {
        postCssPlugins: [
          require("postcss-nested")({})
        ]
      }
    },
    "gatsby-plugin-astroturf"
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ]
}

Anyone here have any idea what might be causing this? Maybe I'm doing something wrong here. This is my first time trying to use astroturf, so I'm still trying to figure it all out. Any help would be greatly appreciated, thanks!

[jquense]

I've not seen this before can you provide a bit more info on what version of node and gatsby you are using?

[ryexley]

@jquense yeah I sure can. I am using node v10.16.0, and gatsby v2.18.4. The site was created using the command npx gatsby new ..., which used the gatsby default starter template. Please let me know if there are additional details you would like. Thank you for your assistance.

[ryexley]

@jquense have any ideas on this?

[Sandy-Garrido]

Hey @ryexley did you ever solve this issue? I don't suppose that if you did, you'd remember it? tia

[ryexley]

@Sandy-Garrido I did not. Sorry. Got no reply, and never found a workaround.