Using Vanta in production version of React App.

[akhmado]

I have a React website that works with Vanta as intended in dev mode but when I build a production version, it fails to compile the Vanta file because it has no default export, is there any way around that, how can I use Vanta in production version?

This is the file: import React, { useState, useEffect, useRef } from 'react'; import classes from './HomePage.module.css'; import Waves from './vanta.waves.min'; import * as THREE from 'three';

const HomePage = () => {

const [vantaEffect, setVantaEffect] = useState(0)
const myRef = useRef(null)

useEffect(() => {
    if (!vantaEffect) {
        setVantaEffect(Waves({
            el: myRef.current,
            color: 0x161616,
            shininess: 60.00,
            THREE: THREE
        }))
    }
    return () => {
        if (vantaEffect) vantaEffect.destroy()
    }
}, [vantaEffect]);

return (
    <div className={classes.waves} ref={myRef}>
        //Components
    </div>
)

};

export default HomePage;

And here is the error I got $ npm run build

new_portfolio@0.1.0 build C:\Users\ahdmo\Desktop\Coding\Projects\fullPortfolio\new_portfolio> react-scripts build

Creating an optimized production build... Failed to compile.

./src/Pages/HomePage/HomePage.js Attempted import error: './vanta.waves.min' does not contain a default export (imported as 'Waves').

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! new_portfolio@0.1.0 build: react-scripts build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the new_portfolio@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ahdmo\AppData\Roaming\npm-cache_logs\2020-01-12T10_17_54_376Z-debug.log

[wolfdavo]

I'm having the same issue. Has anyone found a fix for this?

[wolfdavo]

I was able to find a fix. For anyone having the same issue: 1) Make sure you have the whole vanta-master folder in your project. 2) Import the effect from the non-minified js file found under vanta-master/src instead of the one under vanta-master/dist 3) If you are hosting on Netlify, you'll need to open up your package.json and under "scripts" change "build" from "react-scripts build" to "CI= react-scripts build". Hope this can help someone!