在Next.js+React+TS项目中配置SnapSVG遇报错求助

我正尝试在React项目中使用SnapSVG，但一开始就无法运行。我对webpack不太熟悉，希望能得到详细的配置指导。

报错信息

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)

React组件中的导入代码

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"
  }

我尝试使用imports-loader来解决问题，但配置后出现了新的报错。

配置webpack后的新报错

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)

next.config.js中的webpack配置

webpack(config) {
    config.module.rules.push(
      {
        test: require.resolve('snapsvg'),
        use: 'imports-loader?this=>window,fix=>module.exports=0',
      },
 ...

内容的提问来源于stack exchange，提问作者MarleenEliza