@hashicorp/react-code-block import fails in next.js

[theshadowagent]

I'm trying to use a <CodeBlock /> in my next.js app

import CodeBlock from "@hashicorp/react-code-block";

<CodeBlock code={code} theme="light" language="HTML" />

I get this compilation error on import line:

I also don't see any instructions on how to install / set up the components library in the docs

[caomicc]

I'm having the same issue with <MarketoForm/>, any ideas?

[henryzhao95]

I'm getting a slightly different error:
Module not found: Error: Can't resolve '@hashicorp/react-code-block' in 'C:\Git\My.Web.Foo\src\My.Web.Foo\src\components\deployment'
I noticed react-code-block references classnames which isn't in its packages.json, and VS Code complains about not being able to find ./fragment.graphql (it's definitely there)

[pgibler]

I just installed this and I'm running into an issue with react-code blocks as well while using NextJS.

./node_modules/@hashicorp/react-code-block/partials/clipboard-button/style.module.css:39:3
Syntax error: Selector "&::before" is not pure (pure selectors must contain at least one local class or id)

  37 | 
  38 |   /* for the focus ring */
> 39 |   &::before {
     |   ^
  40 |     border-radius: 8px;
  41 |     border: 3px solid transparent;