(0 , ms_1.default) is not a function at authTokenInterceptor

[MichaelLiss]

Here is the error:

(0 , ms_1.default) is not a function
TypeError: (0 , ms_1.default) is not a function
    at authTokenInterceptor (http://localhost:3000/static/js/bundle.js:9825:34)
    at applyAuthTokenInterceptor (http://localhost:3000/static/js/bundle.js:9503:82)
    at ./src/components/axiosApi/axiosApi.js (http://localhost:3000/static/js/bundle.js:585:69)
    at options.factory (http://localhost:3000/static/js/bundle.js:61632:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:61053:32)
    at fn (http://localhost:3000/static/js/bundle.js:61290:21)
    at ./src/components/funds/Funds.js (http://localhost:3000/static/js/bundle.js:954:76)
    at options.factory (http://localhost:3000/static/js/bundle.js:61632:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:61053:32)
    at fn (http://localhost:3000/static/js/bundle.js:61290:21)

here is the code:

import axios from 'axios';
import { applyAuthTokenInterceptor } from 'axios-jwt';

import { base_url } from '../../environment/url';

const axiosInstance = axios.create({ baseURL: base_url });

const requestRefresh = (refresh) => {
  return axios.post(`${base_url}auth/refreshtoken`, { refresh }).then((response) => response.data.token);
};

axiosInstance.interceptors.request.use((config) => {
  const jwt = sessionStorage.getItem('jwt');
  if (jwt) {
    config.headers.Authorization = `Bearer ${jwt}`;
  }
  return config;
});

applyAuthTokenInterceptor(axiosInstance, { requestRefresh });

export default axiosInstance;

here is axiosapi.js

import axios from 'axios';
import { applyAuthTokenInterceptor } from 'axios-jwt';

import { base_url } from '../../environment/url';

const axiosInstance = axios.create({ baseURL: base_url });

const requestRefresh = (refresh) => {
  return axios.post(`${base_url}auth/refreshtoken`, { refresh }).then((response) => response.data.token);
};

axiosInstance.interceptors.request.use((config) => {
  const jwt = sessionStorage.getItem('jwt');
  if (jwt) {
    config.headers.Authorization = `Bearer ${jwt}`;
  }
  return config;
});

applyAuthTokenInterceptor(axiosInstance, { requestRefresh });

export default axiosInstance;

Here is my package.json

{
  "name": "name",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": "18.18.0",
    "npm": "10.8.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "axios": "^1.7.3",
    "axios-jwt": "^4.0.3",
    "ms": "^2.1.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons-kit": "^2.0.0",
    "react-images-uploading": "^3.1.7",
    "react-modal": "^3.16.1",
    "react-router-dom": "^6.26.0",
    "react-scripts": "5.0.1",
    "ultimate-react-multilevel-menu": "^3.4.9",
    "web-vitals": "^4.2.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[Harrylever]

Hi man. I have the same error. Have you made any update so far?

[zakharsk]

Hi there!
It seems that none of the developers here are worried about the fact that the package doesn't work with modern standards.

Here guy have made a fork that works perfectly well.

Be careful, the methods are slightly different. Read the README.

[Harrylever]

Hi there! It seems that none of the developers here are worried about the fact that the package doesn't work with modern standards.

Here guy have made a fork that works perfectly well.

Be careful, the methods are slightly different. Read the README.

@zakharsk Hi man, can you share a code sample of how you got this to work? I can't get it working on my project. Thank you

[zakharsk]

@MichaelLiss @Harrylever sorry guys, I didn't expect or notice that your problem is not directly related to ms.

In fact, while trying to figure out how to answer your question, I solved my problem in parallel.

The catch is that you and I don't need the latest version (2.1.3) of ms, but 3.0.0-canary.1 Similarly for the axios-jwt dependency.

My problem is solved simply by writing the right version in package.json and updating the dependencies. I dare to recommend that you do the same, but I can't give you exact instructions on how to make sure axios-jwt will use the correct version.

Caution

Next is magic, the meaning of which I do not understand and cannot explain

Perhaps the following option will work:

1. Delete the node_modules folder in the project
2. Remove records about axios-jwt and ms from package.json
3. Delete the lock file (yarn.lock or package-lock.json)
4. Clean package manager cache: yarn cache clean --all or npm cache clean --force
5. Install the remaining dependencies: yarn install or npm install
6. Install ms with the required version: yarn add ms@^3.0.0.0-canary.1 or npm install ms@^3.0.0.0-canary.1
7. Install axios-jwt: yarn add axios-jwt or npm install axios-jwt
8. Check the ms version of axios-jwt: cat node_modules/axios-jwt/package.json | grep "ms"

Should be "ms": "^3.0.0.0-canary.1" and everything should work.

[Harrylever]

Hi man, @zakharsk , Thanks for pointing this out. I just installed the ms@^3.0.0-canary.1, pre-release version, and it's working perfectly.