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,
}));
});