tag[primaryAttributeKey].toLowerCase is not a function

[codeadrian]

tag[primaryAttributeKey].toLowerCase is not a function

[codeAdrian]

Hi @jonoroboto , thanks for the kind words. I'm glad to hear that you plan on using it on your projects.

Can you provide me with the gatsby-config.js and package.json so I can check what is going on under the hood? Also, does this issue happen right after you've installed my plugin, are there any special steps to reproduce it? Additionally, have you tried removing node_modules, yarn.lock, running yarn clean and reinstalling the packages?

[jonoroboto]

Just a quick update - looking at this right now, but having an issue with emotion moving the core package naming. Will be on this for as long as it takes, appreciate the swift response.

[codeAdrian]

@jonoroboto I've ran some of the test cases on a newest version of Gatsby, but I couldn't reproduce the issue. From the stack trace you've attached, It seems like the issue is completely internal within the Helmet package, as it doesn't link to the any code from the font plugin or your src code. So I'm not sure what is going on.

As I can see from the websites attached (they look great, by the way) I can see that the plugin works well here https://roboto.studio/

In any case, I'll need more detail to properly trace the issue, if it is related to the plugin. In any case, keep me posted. You can fork and clone the plugin repo into project-root/plugins folder and run the plugin locally to debug it. If you manage to fix the issue, feel free to submit a PR.

[jonoroboto]

Ok update - I think this might be the issue. It could be due to the way they've changed naming convention in the latest emotion update. We're using the same package, and it broke a bunch of our stuff

[jonoroboto]

Full sized screenshot

[codeAdrian]

Yeah, I had to deal with that issue few days ago. Quick tip regarding the emotion issue:

You'll need to use the beta version of gatsby-plugin-emotion until they release the next version. 5.1. will support Emotion 11. Or you can just downgrade emotion back to latest version 10.

 "gatsby-plugin-emotion": "^5.1.0-next.0",

Let me know if I can close the issue. Cheers!

[codeAdrian]

@jonoroboto Weird that the emotion error is relating it to my plugin, as it is not using Emotion all all. All styles are just regular React inline styles.

  const hiddenStyles: React.CSSProperties = {
    position: "absolute",
    overflow: "hidden",
    clip: "rect(0 0 0 0)",
    height: "1px",
    width: "1px",
    margin: "-1px",
    padding: "0",
    border: "0",
  }

I think that when you upgrade it to version 11, the issue will just go away. Maybe it's just detecting all CSS as error, including that of my plugin.

[jonoroboto]

No probs Adrian, really appreciate the help.

I'm going to close the issue for now, as there's a lot more going wrong than just the omni font loader, that's completely on my side. Thanks again, will give you an update when this is fixed up 👍

[codeAdrian]

@jonoroboto Thank you. I checked everything with Emotion 11. Everything works as expected. No build errors occur with Emotion 11. I am attaching a working config and screenshots.

Package.json

    "@emotion/react": "^11.1.1",
    "gatsby-plugin-emotion": "5.1.0-next.0",
    "gatsby-omni-font-loader": "^1.1.1",

gatsby-browser.js

  `gatsby-plugin-emotion`,
    {
      resolve: "gatsby-omni-font-loader",
      options: {
        enableListener: true,
        preconnect: [
          "https://fonts.gstatic.com"
        ],
        web: [
          {
            name: "Henny Penny",
            file:
              "https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap",
          },
          {
            name: "Roboto",
            file:
              "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
          },
        ],
      },
    },