Unable to use shadergradient in CRA app

[RonithK]

Using the following code snippet results in an error that says "LCanvas" couldn't be resolved.

import React from 'react'
import { LCanvas, Gradient } from 'shadergradient'
import * as reactSpring from '@react-spring/three'
import * as drei from '@react-three/drei'
import * as fiber from '@react-three/fiber'

function App() {
  return (
    <LCanvas
      importedFiber={{ ...fiber, ...drei, ...reactSpring }}
      style={{
        position: 'absolute',
        top: 0,
      }}
    >
      <Gradient cDistance={32} cPolarAngle={125} />
    </LCanvas>
  )
}

I tried using this code snippet instead (based on the example CRA app in the code sandbox):

import "./App.css";
import { GradientCanvas, Gradient } from "shadergradient";

function App() {
    return (
        <div className="App">
            <GradientCanvas style={{ position: "absolute" }}>
                <Gradient
                    cDistance={32}
                    cPolarAngle={125}
                    color1="#ff5005"
                    color2="#dbba95"
                    color3="#d0bce1"
                />
            </GradientCanvas>
        </div>
    );
}

export default App;

But this results in the following run time error:

How do we get shadergradients working properly in a react app?

[ruucm]

Hey thanks for reporting this.

I've updated code examples you can follow it now (from the v1.2.2).

Behind of this, we've decided to detach store codes and changed main component names to "ShaderGradient" from "Gradient". (but was not applied to examples)

Here are examples using it.

CRA Example

Next.js Example

Let me know if it still happens!