vite: Cannot read property 'custom' of undefined

I fixed this by replacing my usage of qs with querystring, since qs has a transitive dependency on object-inspect. Thanks for the tip @matias-capeletto 👍🏼

If absolutely necessary, I’m willing to update the package to bypass the issue, but before doing that, I’d prefer to hear from a vite maintainer as to either when the proper fix will be deployed, or why it’s difficult to do the proper fix.

@ljharb Vite v2.1.4 has been released with improved support for browser field resolution. There is no need to patch object-inspect, I just tested and it now works as expected. Thanks for your input on this one.

npm uninstall qs it works!

@matias-capeletto my theory is that problem is not with vite not supporting “ignore a module” feature but with incorrect mapping of modules that have a “.” in file name with browser fields due to path.extname() returning non falsey value here. So modules with more than one “.” in file name would not support any feature of browser filed, not just ignoring. THis theory is based on the fact that just renaming it to:

"browser": {
    "./util_inspect.js": false
  },

makes vite ignore the module correctly.

The issue is somehow related to having additional “.” in browser ignore filed module file name. Renaming util.inspect.js util_inspect.js in object-inspect package solves this problem. The second dot somehow confuses the parser and this is why this test didn’t catch the bug.

You can use patch-package to make that fix! ☝️

If it turns out that’s a bug, I think I can help with working on it. ❤️

If absolutely necessary, I’m willing to update the package to bypass the issue, but before doing that, I’d prefer to hear from a vite maintainer as to either when the proper fix will be deployed, or why it’s difficult to do the proper fix.

Further investigation revealed that the issue is probably caused by vite not being able to handle the case where import is specified in package.json browser field with “.js” extension:

"browser": {
    "./util.inspect.js": false
  }

And then required in the code omitting “.js” file extension:

var inspectCustom = require('./util.inspect').custom;

P.S. I also tested it with rollup + plugin-commonjs + plugin-node-resolve without vite and is seems to be handling this cases correctly, Not sure about it being exact same versions though.

This is useful, but it should not be the final solution

"resolutions": {
   "umi-request/qs": "6.9.6"
 }

@matias-capeletto Thanks Matias, I wanted to ask you about this, but you answered me earlier, which is great. I’ll dig into it and work on it.

qs:issues https://github.com/ljharb/qs/issues/406

I know the solution

"dependencies": {
    // qs < version 6.10
    "qs": "6.9.6" 
}

@ljharb agreed that this is an issue in Vite. It looks like Vite only has basic support for the browser field, and it is having issues coping with ignoring a module. https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module

For reference, in case it is lost in the comments, Vite doesn’t seem to support ignoring this module:

 "browser": {
    "./util.inspect.js": false
  },

And it would be good if Vite can add support for this.

I fixed this by replacing my usage of qs with querystring, since qs has a transitive dependency on object-inspect. Thanks for the tip @matias-capeletto 👍🏼

Unfortunately this didn’t work for one of my projects since qs is a transitive dependency – any recommendations in that case?

You can just locate node_modules\object-inspect\index.js in your project and replace line 22 to:

var inspectCustom = require('./util.inspect.js').custom;

There is probably better workaround solution with forking it and replacing dependency but I don’t know how this works.

We debugged this a bit in Vite Land, and found that the problem is in an internal dependency: https://www.npmjs.com/package/object-inspect

To reproduce, add that dependency and the generated build will have the error

Uncaught TypeError: Cannot read property 'custom' of undefined

This dependency has a ignore module for the browser for one of the files https://github.com/inspect-js/object-inspect/blob/master/package.json#L67, and that seems to be the problem (https://github.com/inspect-js/object-inspect/blob/master/util.inspect.js)

For reference https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module

Looks like Vite has code to handle this already, but it may be malfunctioning.