TypeError: 'set' on proxy: trap returned falsish for property 'timeout' (Axios, XHR, Happy DOM)

[Fallsleep]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

v18.17.1/v18.18.0

Reproduction repository

https://stackblitz.com/edit/github-6z7ngr-yehgpa?file=tests%2Fhappy-dom.test.ts,tests%2Fjsdom.test.ts,tests%2Fnode.test.ts

Reproduction steps

open stackblitz, it already set run vitest, or run yarn test

Current behavior

it seems proxy XMLHttpRequest class, axios set request property failed.

call stack trace:

TypeError: 'set' on proxy: trap returned falsish for property 'timeout'
    at dispatchXhrRequest (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/adapters/xhr.js:106:21)
    at xhr (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/adapters/xhr.js:64:10)
    at Axios.dispatchRequest (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/core/dispatchRequest.js:66:10)
    at Axios.request (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/core/Axios.js:161:45)
    at Axios.<computed> (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/core/Axios.js:187:17)
    at Function.wrap (/home/projects/github-6z7ngr-yehgpa/node_modules/axios/lib/helpers/bind.js:18:15)
    at eval (/home/projects/github-6z7ngr-yehgpa/tests/axios.test.ts:20:13)
    at eval (/home/projects/github-6z7ngr-yehgpa/node_modules/@vitest/runner/dist/index.js:164:14)
    at eval (/home/projects/github-6z7ngr-yehgpa/node_modules/@vitest/runner/dist/index.js:87:26)

Expected behavior

axios can request well in vitest.

maybe it's axios bug, I also opened an issue there: axios/axios#6050

add config in axios.create:

const request = axios.create({
    adapter: 'http'
});

or set it in beforeAll

beforeAll(() => {
  axios.defaults.adapter = 'http'
});

can both make the reproduction test passed.

But in my project, the test passed, but Vitest still catch the error, util I set default config before axios.create

if(import.meta.env.MODE == 'test') {
  axios.defaults.adapter = 'http'
}
const request = axios.create({
  // other config
})

[kettanaito]

Hi, @Fallsleep. Thanks for reporting this.

So, a bit of context.

mswjs/interceptors library provisions the XMLHttpRequest interception by wrapping the said class in a Proxy. We have the ontimeout setter proxy, which I suspect causes the issue here:

https://github.com/mswjs/interceptors/blob/3258f5cc62c472ba63f5c70e455d5b245c74a216/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts#L60

Then, axios/lib/adapters/xhr.js as this request.ontimeout assignment, which I think results in an error:

https://github.com/axios/axios/blob/f7adacdbaa569281253c8cfc623ad3f4dc909c60/lib/adapters/xhr.js#L170

I gave the error message itself a quick search and it seems to be way too low-level for web to know much about it (it surfaces as random errors of different libraries, nothing to do with Proxy itself).

From what I understand, JavaScript has trouble assigning (setting) the ontimeout property on XHR request instance due to the way we establish the setter. I don't see anything special on Axios' side. Will have to put this into an integration test in the Interceptors repo and see if debugging gives me more info.

[kettanaito]

Hi, @Fallsleep. I've added a test to reproduce this but could not:

• fix(xhr): allow setters for non-existing properties interceptors#477

Could you please take a look and see if something's different from what you have? Dependencies used in the test:

• Node: 18.14.2
• Axios: 1.6.0
• @mswjs/interceptors: 0.25.7

The request using the xhr adapter for Axios passes.

[kettanaito]

A minor thing I noticed in your test: you are calling setupServer() within the test itself. That's not advised. Instead, move it to the root scope of your test. It doesn't fix your issue but that's the correct setupServer() usage.

[matsura]

@kettanaito I am able to reproduce this error in my project, even when adding the mswjs/interceptors like in your comment. The setupservers in my case is in beforeAll of the executed test. I use an old axios version, but I tried with the latest as well, same issue.

If I change the adapter to http, II get the following:
TypeError: Cannot read property 'readable' of null
❯ IncomingMessage._read http_incoming.js:120:19
❯ IncomingMessage.Readable.read internal/streams/readable.js:465:10
❯ resume internal/streams/readable.js:963:12
❯ processTicksAndRejections internal/process/task_queues.js:82:21

and also:

TypeError: body.getReader is not a function
❯ _NodeClientRequest.respondWith node_modules/@mswjs/interceptors/lib/node/chunk-G5IEXC7T.mjs:473:31
❯ node_modules/@mswjs/interceptors/lib/node/chunk-G5IEXC7T.mjs:333:14

Running via vitest with vue.

If I update axiios to latest along with mswjs/interceptors, no difference.

[kettanaito]

What is the Node.js version you are using? The getReader error hints that you are on old Node version. Could you check it's v18+?

[Fallsleep]

Dependencies:

• Node v18.17.1(my local environment)/v18.18.0(stackblitz)
• axios@1.6.0
• @mswjs/interceptors@0.25.7

A minor thing I noticed in your test: you are calling setupServer() within the test itself. That's not advised. Instead, move it to the root scope of your test. It doesn't fix your issue but that's the correct setupServer() usage.

in my own project, I do use setupServer in beforeAll in vitest.setup.ts, unlike the test in reproduction.

[Fallsleep]

I found the different of dependencies, my project and reproduction both use happy-dom 12.10.3 for DOM environment by setting test.environment in vitest.config.ts, your test in mswjs/interceptors#477 use jsdom by setting @vitest-environment jsdom.

When I change the environment to jsdom, the test passed, if remove test.environment in vitest.config.ts, the test will also failed. According to https://vitest.dev/guide/environment.html, the environment is node.

According axios/axios#5917 (comment), maybe there's something wrong in axios.

@kettanaito

[kettanaito]

Thanks for that clarification, @Fallsleep! It's extremely important. I will look into what Happy DOM does with the ontimeout property and update this thread.

[kettanaito]

I can confirm that switching the test to Happy DOM produces the error:

 FAIL  modules/XMLHttpRequest/regressions/xhr-axios-xhr-adapter.test.ts > performs a request with the "xhr" axios adapter
TypeError: 'set' on proxy: trap returned falsish for property 'timeout'
 ❯ dispatchXhrRequest ../node_modules/.pnpm/axios@1.6.0/node_modules/axios/lib/adapters/xhr.js:91:21
 ❯ xhr ../node_modules/.pnpm/axios@1.6.0/node_modules/axios/lib/adapters/xhr.js:49:10
 ❯ Axios.dispatchRequest ../node_modules/.pnpm/axios@1.6.0/node_modules/axios/lib/core/dispatchRequest.js:51:10
 ❯ Axios.request ../node_modules/.pnpm/axios@1.6.0/node_modules/axios/lib/core/Axios.js:146:33
 ❯ wrap ../node_modules/.pnpm/axios@1.6.0/node_modules/axios/lib/helpers/bind.js:5:15
 ❯ modules/XMLHttpRequest/regressions/xhr-axios-xhr-adapter.test.ts:29:21

[kettanaito]

I found the root cause and pushed the fix in mswjs/interceptors#477. The test is passing locally using Axios, XHR adapter, and Happy DOM.

[kettanaito]

Released: v2.0.4 🎉

This has been released in v2.0.4!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.