Uncaught TypeError: Cannot read properties of undefined (reading 'split')

Question

I'm using webpack, and I'm getting this error in the browser:

Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at eval (validator.js:15)
    at Object../node_modules/axios/lib/helpers/validator.js (main.bundle.js:1225)
    at __webpack_require__ (main.bundle.js:1673)
    at eval (Axios.js:8)
    at Object../node_modules/axios/lib/core/Axios.js (main.bundle.js:1005)
    at __webpack_require__ (main.bundle.js:1673)
    at eval (axios.js:5)
    at Object../node_modules/axios/lib/axios.js (main.bundle.js:961)
    at __webpack_require__ (main.bundle.js:1673)
    at eval (index.js:1)

There are no errors or warnings at compilation-time.

Line 15 of validator.js looks like this: var currentVerArr = pkg.version.split('.');

There is this line at the top of the file: var pkg = __webpack_require__(/*! ./../../package.json */ "./package.json");

So it looks like that __webpack_require is not working?

How can I fix this?

Answer 1

Apparently axios depends on the "version" property being defined in package.json. I don't know why, though...

But the solution is to add a "version" property to package.json. Any version.

Answer 2

I also encountered the same problem. My axios version is 0.21.3 I tried many methods but it didn't work. Finally, back to 0.21.1(no validator.js in this version , so I think this is a bug)

npm i --save axios@0.21.1

Answer 3

I encountered the same issue today. It was because I changed the default loader for json files to file-loader like this:

{
  type: 'javascript/auto',
  test: /\.(geo)?json$/,
  use: 'file-loader'
},

If you look at the code for axios/lib/helpers/validators.js in axios v0.21.4, you see it imports package.json like this: var pkg = require('./../../package.json'); .

The above config causes the file gets loaded as a string that points to its URL, but the code assumes a JS object and when it tries to access its version property, it fails.

I fixed the error by excluding axios/package.json from that rule:

{
  type: 'javascript/auto',
  test: /\.(geo)?json$/,
  exclude: [path.resolve(__dirname, 'node_modules/axios/package.json')],
  use: 'file-loader'
},

It's possible your issue was due to something similar in your webpack config. Check out your rules and other parts of your config to see what loaders you're using and how you're resolving files and objects.