AxiosError: options must be an object #5142

ckvv · 2022-10-17T09:37:43Z

Seems to be because the config created by create is not being merged correctly

Describe the bug

F {message: 'options must be an object', name: 'AxiosError', code: 'ERR_BAD_OPTION_VALUE', stack: 'AxiosError: options must be an object\n    at Objec…le:///Users/chenkai/Desktop/test/index.html:21:28'}
code
: 
"ERR_BAD_OPTION_VALUE"
message
: 
"options must be an object"
name
: 
"AxiosError"
stack
: 
"AxiosError: options must be an object\n    at Object.Je [as assertOptions] (https://esm.sh/v96/[email protected]/es2022/axios.js:3:10223)\n    at B.request (https://esm.sh/v96/[email protected]/es2022/axios.js:3:10983)\n    at B.<computed> [as get] (https://esm.sh/v96/[email protected]/es2022/axios.js:3:12121)\n    at Function.get (https://esm.sh/v96/[email protected]/es2022/axios.js:2:148)\n    at file:///Users/chenkai/Desktop/test/index.html:21:28"
[[Prototype]]
: 
Error

To Reproduce

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
<script type="module">
import Axios from 'https://esm.sh/axios';
import Qs from 'https://esm.sh/[email protected]';

const instance = Axios.create({
  paramsSerializer(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
});

const res = await instance.get('https://jsonplaceholder.typicode.com/comments');
console.log(res);
</script>
</html>

Code snippet

No response

Expected behavior

No response

Axios Version

v1.1.3

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

No response

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

J3m5 · 2022-10-17T11:37:04Z

import axios from 'axios'
import { parse, stringify } from 'qs'

const axiosInstance = axios.create({
  paramsSerializer: {
    encode: parse,
    serialize: stringify,
  },
})

Should fix it

shomyx · 2022-10-17T13:06:55Z

import axios from 'axios'
import { parse, stringify } from 'qs'

const axiosInstance = axios.create({
  paramsSerializer: {
    encode: parse,
    serialize: stringify,
  },
})

Should fix it

Same issue as @ckvv , but solution above did not fix it for me. Everything still the same.

DigitalBrainJS · 2022-10-17T13:36:43Z

It seems to work as expected https://codesandbox.io/s/axios-issue-5142-92zlpm?file=/src/index.js

import axios from "axios";
import { stringify } from "qs";

const api = axios.create({
  paramsSerializer: {
    serialize: stringify // or (params) => Qs.stringify(params, {arrayFormat: 'brackets'})
  }
});

const formData = new FormData();
formData.append("file", 123);

(async () => {
  const { data } = await api.post("https://httpbin.org/post", formData, {
    params: {
      x: [1, 2, 3]
    }
  });

  console.log("Echo:", data);
})();

J3m5 · 2022-10-17T13:55:55Z

This is the expected format from the assertOptions function

Roriz · 2022-10-17T18:40:28Z

Is issue has origin on new feature: #5113
We should change a major version for that please

J3m5 · 2022-10-17T20:14:46Z

Is issue has origin on new feature: #5113
We should change a major version for that please

This is clearly a breaking change, documentation should also be updated accordingly.
The old format should be declared as deprecated but still be available to use, at least before a new major version is released.

DigitalBrainJS · 2022-10-17T21:24:17Z

at least before a new major version is released.

That's exactly what was done. This interface has been refactored in 1.0.0-alpha.1

J3m5 · 2022-10-17T21:54:08Z

That's exactly what was done. This interface has been refactored in 1.0.0-alpha.1

I'll double check the timing but I've been using this interface before v1 and it just broke with 1.1.3 today.
I'm guessing that it was silently failing and it is now throwing an error and thus breaking.

philBrown · 2022-10-18T04:23:20Z

Duplicate of axios/axios-docs#90

shomyx · 2022-10-18T10:35:22Z

import axios from 'axios'
import { parse, stringify } from 'qs'

const axiosInstance = axios.create({
  paramsSerializer: {
    encode: parse,
    serialize: stringify,
  },
})

Should fix it

Same issue as @ckvv , but solution above did not fix it for me. Everything still the same.

It's working after all, just had to tweak something in a custom middleware I had. Thanks @J3m5 for the tip.

ckvv · 2022-10-18T10:58:26Z

axios/lib/helpers/buildURL.js

Line 47 in 9d4b016

const serializeFn = options && options.serialize;

The original spelling should be changed to

const instance = Axios.create({
  paramsSerializer: {
    serialize: (params) => Qs.stringify(params, {arrayFormat: 'brackets'})
  },
});

This is a breaking update, but the documentation doesn't say ，and it contains a previous wrong usage

arpitha-jaanaki · 2023-02-09T18:18:29Z

HI
i just upgraded axios version to 1..3.2 and facing error like "options must be an object"
tried above all the solutions nothing worked for me,

**"axios": "^1.3.2",**

here my axiosservice.js file looks like

import axios, { isCancel, AxiosError } from 'axios';
import { qs, parse, stringify } from 'qs';

class AxiosService {
	instance = axios.create({
		paramsSerializer: {
			serialize: (params) => Qs.stringify(params, { arrayFormat: 'brackets' })
		}
	});
	
	requestInterceptor = this.instance.interceptors.request.use(
		(config) => {
			let accessToken = localStorage.getItem(SESSION_CONSTANTS.ACCESS_TOKEN);
			config.headers[HTTP_HEADERS.AUTHORIZATION] = `bearer ${accessToken}`;
			config.headers[HTTP_HEADERS.X_AUTH_TOKEN] = `${accessToken}`;
			config.headers[HTTP_HEADERS.REQUEST_FROM] = `GUI`;
			return config;
		},
		(err) => Promise.reject(err)
	);

anyway im missing anything here ?

also tried below solution too

class AxiosService {
	instance = axios.create({
		paramsSerializer: {
			encode: parse,
			serialize: stringify
		}
	});

…os/axios#5142

murbanowicz · 2023-04-14T13:26:41Z

paramsSerializer: {
			encode: parse,
			serialize: stringify
		}

working, but causing TypeScript issues. Any idea how to work around it?

naftalimurgor · 2023-05-11T09:56:36Z

Hi @murbanowicz
Have you been able to resolve this issue? Got a similar issue with TypeScript

hu-qi · 2025-01-17T09:05:22Z

Thanks everyone!

In my case, it works:

import { parse, stringify } from "qs"
axios({
        // ...
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        paramsSerializer: {
          encode: parse,
          serialize: stringify
        }
      })

Roriz mentioned this issue Oct 17, 2022

Added custom params serializer support; #5113

Merged

ckvv closed this as completed Oct 18, 2022

Avoler0 mentioned this issue Oct 22, 2022

axiox.get next.js api 통신 params 오류 Avoler0/wewi.gg#4

Open

clarkio mentioned this issue Oct 23, 2022

[BUG] Axios Error - Twitch Component Won't Execute Due to Error PipedreamHQ/pipedream#4565

Closed

jazmon mentioned this issue Oct 26, 2022

axios update openapistack/openapi-client-axios#130

Closed

marlonbrs mentioned this issue Nov 4, 2022

Login middlend BigRoomTechnologies/shrexpo#10

Merged

su8ru mentioned this issue Dec 15, 2022

Support [email protected] aspida/aspida#788

Closed

hash-bang added a commit to MomsFriendlyDevCo/doop-http that referenced this issue Feb 27, 2023

TASK: DOWNGRADE Axios as the new version throws errors related to axi…

5b2e3d1

…os/axios#5142

isekiro mentioned this issue Mar 29, 2023

双token过期问题 pure-admin/vue-pure-admin#493

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AxiosError: options must be an object #5142

AxiosError: options must be an object #5142

ckvv commented Oct 17, 2022 •

edited

Loading

J3m5 commented Oct 17, 2022

shomyx commented Oct 17, 2022

DigitalBrainJS commented Oct 17, 2022 •

edited

Loading

J3m5 commented Oct 17, 2022

Roriz commented Oct 17, 2022 •

edited

Loading

J3m5 commented Oct 17, 2022

DigitalBrainJS commented Oct 17, 2022 •

edited

Loading

J3m5 commented Oct 17, 2022

philBrown commented Oct 18, 2022

shomyx commented Oct 18, 2022

ckvv commented Oct 18, 2022

arpitha-jaanaki commented Feb 9, 2023 •

edited by DigitalBrainJS

Loading

murbanowicz commented Apr 14, 2023

naftalimurgor commented May 11, 2023

hu-qi commented Jan 17, 2025

AxiosError: options must be an object #5142

AxiosError: options must be an object #5142

Comments

ckvv commented Oct 17, 2022 • edited Loading

Describe the bug

To Reproduce

Code snippet

Expected behavior

Axios Version

Adapter Version

Browser

Browser Version

Node.js Version

OS

Additional Library Versions

Additional context/Screenshots

J3m5 commented Oct 17, 2022

shomyx commented Oct 17, 2022

DigitalBrainJS commented Oct 17, 2022 • edited Loading

J3m5 commented Oct 17, 2022

Roriz commented Oct 17, 2022 • edited Loading

J3m5 commented Oct 17, 2022

DigitalBrainJS commented Oct 17, 2022 • edited Loading

J3m5 commented Oct 17, 2022

philBrown commented Oct 18, 2022

shomyx commented Oct 18, 2022

ckvv commented Oct 18, 2022

arpitha-jaanaki commented Feb 9, 2023 • edited by DigitalBrainJS Loading

murbanowicz commented Apr 14, 2023

naftalimurgor commented May 11, 2023

hu-qi commented Jan 17, 2025

ckvv commented Oct 17, 2022 •

edited

Loading

DigitalBrainJS commented Oct 17, 2022 •

edited

Loading

Roriz commented Oct 17, 2022 •

edited

Loading

DigitalBrainJS commented Oct 17, 2022 •

edited

Loading

arpitha-jaanaki commented Feb 9, 2023 •

edited by DigitalBrainJS

Loading