search

hashicorp / react-components

A set of HashiCorp branded react components currently maintained and used by the marketing dev team
https://react-components.vercel.app
Mozilla Public License 2.0
60 stars 17 forks source link

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

Open theshadowagent opened 2 years ago

theshadowagent commented 2 years ago

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:

image

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

caomicc commented 1 year ago

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

henryzhao95 commented 1 year ago

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 commented 10 months ago

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;