TypeError: Cannot set property WebSocket of #<Object> which has only a getter (Next.js) #2339
Comments
lasseklovstad
added
bug
|
Hi, @lasseklovstad. Thanks for reporting this! I will take a look at this once I have a moment, I think I know the root cause of this. |
kettanaito
changed the title
Root causeThe issue is caused by Next.js defining the global This property definition doesn't support setters and doesn't have SolutionIdeally, open a PR to Next to define that property with |
|
I've opened a pull request to Next.js to fix this issue: vercel/next.js#72079. Hope the team will have time to look into this. Meanwhile, closed. Not an MSW issue. Please follow the progress at the linked pull request. |
|
I still think MSW should have a better developer experience around non-configurable globals, so I'm adding an error and disabling the interceptor if that's the case: mswjs/interceptors#665. Will make it easier to debug for everyone. |
…operty (#72079) ## What The way Next.js re-defines a global `WebSocket` property makes it non-configurable. No other agents, such as API mocking libraries, are able to re-defined it. This [causes issues](mswjs/msw#2339) for Next.js users. # Why Because the way the `WebSocket` property descriptor is set in Next.js doesn't allow that property to be configured anymore (and neither does it have a setter): https://github.com/vercel/next.js/blob/de4f197e2fde19526ee019fbebb068e962b58fc0/packages/next/src/server/node-environment-baseline.ts#L11-L15 ## How This can be solved by setting `configurable: true` on the object descriptor. Generally, I'd advise against such restrictive descriptors for globals Next.js doesn't own, like fetch or WebSocket. Try adhering to how such globals are defined in Node.js—configurable and often with setters: ``` > Object.getOwnPropertyDescriptor(global, 'WebSocket') { get: [Function: get WebSocket], set: [Function: set WebSocket], enumerable: false, configurable: true } ```
…operty (vercel#72079) ## What The way Next.js re-defines a global `WebSocket` property makes it non-configurable. No other agents, such as API mocking libraries, are able to re-defined it. This [causes issues](mswjs/msw#2339) for Next.js users. # Why Because the way the `WebSocket` property descriptor is set in Next.js doesn't allow that property to be configured anymore (and neither does it have a setter): https://github.com/vercel/next.js/blob/de4f197e2fde19526ee019fbebb068e962b58fc0/packages/next/src/server/node-environment-baseline.ts#L11-L15 ## How This can be solved by setting `configurable: true` on the object descriptor. Generally, I'd advise against such restrictive descriptors for globals Next.js doesn't own, like fetch or WebSocket. Try adhering to how such globals are defined in Node.js—configurable and often with setters: ``` > Object.getOwnPropertyDescriptor(global, 'WebSocket') { get: [Function: get WebSocket], set: [Function: set WebSocket], enumerable: false, configurable: true } ```
Prerequisites
Environment check
mswversionNode.js version
20
Reproduction repository
https://github.com/lasseklovstad/msw-websocker-bug-nextjs
Reproduction steps
Run
npm i,npm run devand open the nextjs appCurrent behavior
node_modules\@mswjs\interceptors\lib\browser\interceptors\WebSocket\index.mjs (668:1) @ _WebSocketInterceptor.setup ⨯ TypeError: Cannot set property WebSocket of #<Object> which has only a getterExpected behavior
Nextjs app should work as before.
The text was updated successfully, but these errors were encountered: