Cannot read properties of undefined (reading 'replace')

[drydenwilliams]

I just can't seem to get theme-ui and Prism working together at all, I'm just stuck on this error:

When I have:

  pre: ({ children }) => <>{children}</>,
  code: Prism,

All I see is this error:

I'm using it with gatsby and my versions are:

{
    "@theme-ui/color": "^0.11.3",
    "@theme-ui/prism": "^0.11.3",
    "gatsby-plugin-theme-ui": "^0.11.3",
    "theme-ui": "^0.11.3",
}

I've tried updating packages with no luck. And I copied this setup as it's working just fine.

Any help would be awesome. Thanks :)

[drydenwilliams]

I think It might be because it doesn't have a language that is being passed through? Or that it should be a JSX element?

  code: (props) => {
    console.log("PROPS", props);
    return <Prism {...props} />;
  },
  
// => { children: "color: #444\n" } 

[hasparus]

<ThemeUIPrism /> doesn't take language prop, it grabs the language from the className, so when the className is missing this can fail.

const [language] = outerClassName.replace(/language-/, '').split(' ')

I think we should fix it and default missing className to an empty string here.

[hasparus]

I created an issue to track this bug: #2016.

You can work around it by setting the default className to "".