Using axios defaults

[Senderek]

I am trying to move my project from plasmo to wxt.
In the project I am extensively using axios for api calls.
Unfortunately I am getting an error when trying to use axios.defaults setup. Is that something not allowed in wxt?

Error:

WXT 0.20.7                                                                                                                                                                                          17:51:57
⚙ Hook execution order:                                                                                                                                                                            17:51:57
⚙   1. wxt:built-in:unimport                                                                                                                                                                       17:51:57
⚙   2. @wxt-dev\module-react                                                                                                                                                                       17:51:57
⚙   3. wxt.config.ts > hooks                                                                                                                                                                       17:51:57
ℹ Generating types...                                                                                                                                                                              17:51:57
⚙ vite-node transformed entrypoint D:\rep\wxttest\wxt-dev-wxt\entrypoints\content.ts                                                                                                               17:51:57
⚙ Original:                                                                                                                                                                                        17:51:57
---
export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    console.log('Hello content.');
  },
});

---
⚙ Transformed:                                                                                                                                                                                     17:51:57   
---
export default defineContentScript({
  matches: ['*://*.google.com/*'],
});
---
⚙ vite-node transformed entrypoint D:\rep\wxttest\wxt-dev-wxt\entrypoints\background.ts                                                                                                            17:51:57
⚙ Original:                                                                                                                                                                                        17:51:57   
---
import axios from "axios";

interface CreateApiParams {
  getAccessToken: () => Promise<string | null | undefined>;
  baseUrl?: string | null;
  getBaseUrl?: () => Promise<string | undefined>;
  isExtraErrorLoggingEnabled?: () => Promise<boolean>;
  customErrorHandler?: (error: Error, message: string) => void;
}

const createApi = ({
  getAccessToken,
  baseUrl = "",
  getBaseUrl,
  isExtraErrorLoggingEnabled,
  customErrorHandler,
}: CreateApiParams) => {
  axios.defaults.headers["Content-Type"] = "application/json";
  return {
    apiFingerprint: "lorem ipsum",
  };
};

type Api = ReturnType<typeof createApi>;

const d = async () => {
  const response = await axios("/public/configuration.json", {
    baseURL: "https://test.net",
    skipAuth: true,
  });
};

export default defineBackground(() => {
  console.log("Hello background!", { id: browser.runtime.id });

  d().then(() => {
    console.log("test");
  });
});

---
⚙ Transformed:                                                                                                                                                                                     17:51:57   
---
import axios from "axios";

interface CreateApiParams {
  getAccessToken: () => Promise<string | null | undefined>;
  baseUrl?: string | null;
  getBaseUrl?: () => Promise<string | undefined>;
  isExtraErrorLoggingEnabled?: () => Promise<boolean>;
  customErrorHandler?: (error: Error, message: string) => void;
}

const createApi = ({
  getAccessToken,
  baseUrl = "",
  getBaseUrl,
  isExtraErrorLoggingEnabled,
  customErrorHandler,
}: CreateApiParams) => {
  axios.defaults.headers["Content-Type"] = "application/json";
  return {
    apiFingerprint: "lorem ipsum",
  };
};

type Api = ReturnType<typeof createApi>;

export default defineBackground();
---
✖ Command failed after 218 ms                                                                                                                                                                      17:51:57

 ERROR  Cannot read properties of undefined (reading 'href')                                                                                                                                        17:51:57  

    at /D:/rep/wxttest/wxt-dev-wxt/node_modules/axios/lib/platform/common/utils.js:43:49
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:578:26)
    at ViteNodeRunner.interopedImport (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:450:26)
    at ViteNodeRunner.directRequest (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:271:20)
    at ViteNodeRunner.cachedRequest (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:189:11)
    at ViteNodeRunner.dependencyRequest (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:239:10)
    at entrypoints\background.ts:1:1
    at ViteNodeRunner.runModule (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:397:4)
    at ViteNodeRunner.directRequest (/D:/rep/wxttest/wxt-dev-wxt/node_modules/vite-node/dist/client.mjs:375:3)

Steps to reproduce:

1. Create a new project using: npx wxt@latest init
2. Add axios (e.g. npm install axios@latest or yarn add axios)
3. Add the axios code in background.ts: lines that seems to break it are axios.defaults.headers["Content-Type"] = "application/json" (any other interaction with defaults does that as well e.g. axios.defaults.transformResponse[...]) or type Api = ReturnType<typeof createApi>;
4. Modify package.json postinstall command with --debug
5. Run yarn run postinstall

background.ts

import axios from "axios";

interface CreateApiParams {
  getAccessToken: () => Promise<string | null | undefined>;
  baseUrl?: string | null;
  getBaseUrl?: () => Promise<string | undefined>;
  isExtraErrorLoggingEnabled?: () => Promise<boolean>;
  customErrorHandler?: (error: Error, message: string) => void;
}

const createApi = ({
  getAccessToken,
  baseUrl = "",
  getBaseUrl,
  isExtraErrorLoggingEnabled,
  customErrorHandler,
}: CreateApiParams) => {
  axios.defaults.headers["Content-Type"] = "application/json";
  return {
    apiFingerprint: "lorem ipsum",
  };
};

type Api = ReturnType<typeof createApi>;

const d = async () => {
  const response = await axios("/public/configuration.json", {
    baseURL: "https://test.net",
    skipAuth: true,
  });
};

export default defineBackground(() => {
  console.log("Hello background!", { id: browser.runtime.id });

  d().then(() => {
    console.log("test");
  });
});

[marcellino-ornelas]

@Senderek Im using Axios in WXT and not running into any problems but we also don't use axios.defaults 😄 We are using axios.create which solves the same thing your trying to do and ours is working with no issues 😃

Creating an instance
You can create a new instance of axios with a custom config.

axios.create([config])
const instance = axios.create({
headers: {"Content-Type": 'application/json'}
});

If you need it to be dynamic, you can also use axios.interceptors.request

---

As I was writing this I think I see your problem tho 🤔

axios.defaults.headers["Content-Type"] = "application/json";

should be:

axios.defaults.headers.common["Content-Type"] = "application/json";

https://github.com/axios/axios?tab=readme-ov-file#config-defaults