the AURORA effect is not working

[Ankush-Rajpoot]

Uncaught TypeError: Cannot set properties of null (setting 'renderer')
at new ebt (index-CMIogMVV.js:9465:1175)
at index-CMIogMVV.js:9555:209
at Di (index-CMIogMVV.js:8:25504)
at ne (index-CMIogMVV.js:8:44517)
at index-CMIogMVV.js:8:42678
at w (index-CMIogMVV.js:1:10841)
at MessagePort.D (index-CMIogMVV.js:1:11200)Understand this error

[Om-singh-ui]

Hi @Ankush-Rajpoot,

The error Uncaught TypeError: Cannot set properties of null (setting 'renderer') usually happens when the script is trying to access a DOM element that doesn’t exist yet. In your case, the Aurora effect probably expects a container element to be present in the DOM.

Here is how you can fix it:

1. Check your container element exists
   Make sure the element you’re passing to the Aurora renderer has the correct id or ref, e.g.:

<div id="aurora-container"></div>

2. Initialize after the DOM loads
   If you’re using plain JS, wrap your code in window.onload:

window.onload = () => {
  const container = document.getElementById('aurora-container');
  new AuroraEffect(container); // or your renderer initialization
};

In React, use useEffect to ensure the element is rendered first:

import { useEffect, useRef } from 'react';

function Aurora() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      new AuroraEffect(containerRef.current);
    }
  }, []);

  return <div ref={containerRef}></div>;
}

3. Double-check imports
   Make sure AuroraEffect or the renderer script is correctly imported and available.

[danbenba]

Salut @Ankush-Rajpoot,

En regardant directement le code source d'Aurora.jsx, le composant gère déjà lui-même le timing via useEffect et useRef — donc l'erreur Cannot set properties of null (setting 'renderer') vient probablement d'un usage incorrect du composant, pas d'un problème de timing DOM.

Voici les causes les plus fréquentes :

Tu instancies Renderer manuellement en dehors du composant alors qu'il faut simplement utiliser <Aurora /> directement — le renderer est créé à l'intérieur du useEffect et attaché au ref interne ctnDom.

Le composant est rendu conditionnellement (ex. derrière un if ou un &&) et le ref est null au moment où le code OGL s'exécute. La garde if (!ctn) return; dans le code source protège contre ça, mais si tu as surchargé le composant, cette protection peut sauter.

La dépendance [amplitude] dans le tableau du useEffect signifie que changer amplitude recrée le renderer — si tu passes une valeur instable (ex. calculée inline), ça peut provoquer des erreurs de montage/démontage rapides.

Solution recommandée : utilise le composant tel quel sans ré-instancier OGL manuellement :

jsx
import Aurora from './Aurora';

function App() {
return (
<div style={{ position: 'relative', width: '100%', height: '400px' }}>
<Aurora
colorStops={['#5227FF', '#7cff67', '#5227FF']}
amplitude={1.0}
blend={0.5}
speed={1.0}
/>

);
}

Assure-toi aussi que le conteneur parent a une taille définie (width/height), sinon ctn.offsetWidth retourne 0 et le canvas WebGL ne s'initialise pas correctement.