Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Issue

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)
**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',
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.