chenqingspring/react-lottie

TypeError on canvas.getContext in node_modules

srhodes9115 opened this issue · 2 comments

I am getting a build error on canvas.getContext within the node modules. Any help would be appreciated

Build error occurred
TypeError: canvas.getContext is not a function
at /workspace/node_modules/lottie-web/build/player/lottie.js:4736:22
at /workspace/node_modules/lottie-web/build/player/lottie.js:4740:4
at /workspace/node_modules/lottie-web/build/player/lottie.js:4936:2
at /workspace/node_modules/lottie-web/build/player/lottie.js:7:26
at Object. (/workspace/node_modules/lottie-web/build/player/lottie.js:12:2)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:996:19) {
type: 'TypeError'
}

These are my relevant dependencies
"dependencies": {
"@types/react-lottie": "^1.2.6",
"next": "^11.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-lottie": "^1.2.3",
"typescript": "4.3.5"
}

This is how I'm incorporating Lottie

const LoadingSpinner = (): React.ReactElement => {
    const defaultOptions: Options = {
        loop: true,
        autoplay: true,
        animationData: spinner,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    }

    return (
        <div>
            <LottieAnimation
                options={defaultOptions}
                height={300}
                width={300}
            />
        </div>
    )
}

Why was this closed?!

apparently this is the solution #66 (comment)
But not for me. For me worked adding this into my tests files

beforeEach(() => {
  vi.mock('react-lottie', () => ({
    default: () => null,
  }));
});