How to use snap SVG in react with next and TS? - reactjs

Question

Issue
Hello,
I am trying to use SnapSVG in my react project, but I cannot get it to run in the first place. Could someone help me with the proper settings? I am not very familiar with webpack so detailed instructions would be very much appreciated.
error
index.js?46cb:602 Uncaught ReferenceError: window is not defined
at Object.<anonymous> (FILEPATH/node_modules/snapsvg/dist/snap.svg.js:485:3)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.snapsvg (FILEPATH/.next/server/pages/index.js:1291:18)
at
**webpack_require**
(FILEPATH/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/domain/top-first-view/index.tsx:9:65)
import in React components
import * as Snap from 'snapsvg';
package.json
"dependencies": {
"next": "^13.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sanitize.css": "^13.0.0",
"sass": "^1.56.1"
},
"devDependencies": {
"typescript": "^4.8.4",
"imports-loader": "^4.0.1",
"snapsvg": "^0.5.1",
"#types/snapsvg": "^0.5.2",
"cjs-loader": "^0.1.0",
...
},
"volta": {
"node": "18.6.0",
"yarn": "1.22.19"
}
what I've tried so far
I have tried using imports-loader as is discussed in this Github thread, but this resulted in a new error.
new error after webpack settings
Uncaught Error: ENOENT: no such file or directory, open 'FILEPATH/.next/server/pages/index.js'
at Object.openSync (node:fs:594:3)
at Object.readFileSync (node:fs:462:35)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1143:18)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (FILEPATH/node_modules/next/dist/server/require.js:88:12)
at <unknown> (FILEPATH/Documents/GitHub/toda-web-art/node_modules/next/dist/server/load-components.js:37:73)
at async Object.loadComponents (FILEPATH/node_modules/next/dist/server/load-components.js:37:26)
webpack config in next.config.js
webpack(config) {
config.module.rules.push(
{
test: require.resolve('snapsvg'),
use: 'imports-loader?this=>window,fix=>module.exports=0',
},
...
Thank you!