My problem involves using the vantajs wave library. I want to figure out how to make the waves continue rendering on a specific CSS selector even after clicking through the tablinks of my react app. However, I encounter an error when using Brave browser that says: "three.r92.min.js:28 Uncaught TypeError: Cannot read property 'precision' of null". Initially, the wave doesn't render at all.
Interestingly, if I switch to Google Chrome and check the background of my selected element, I can see the wave effect that I implemented from .
However, the issue arises when I switch from the home tab to another tab, and then return to the home tab where my selected element resides. The wave effect is no longer visible behind the selected element, and the error message displayed is: "vanta.waves.min.js:161 [VANTA] Cannot find element .showcase__container".
Below is the HTML code:
<meta charset='utf-8' lang="EN-US">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="./src/three.r92.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>DigitalWebFlex</title>
</head>
<body>
<div id='root'></div>
<script type='text/javascript' src='/dist/bundle.js' charset='utf-8'></script>
<script>
VANTA.WAVES('#showcase__container');
</script>
</body>
And here is the React code:
<div className="showcase__container" id="showcase__container">
<button className="button button--animated button--white" onClick={this.setPagePortfolio}>Portfolio</button>
</div>
Thank you in advance!