Cannot read property 'custom' of undefined

[rashagu]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

The development environment is fine, but the production environment reports an error
And I used umi-request
TypeError: Cannot read property 'custom' of undefined at index.2642e881.js:1

Reproduction

a minimal GitHub repository: https://github.com/rashagu/vite_test1

System Info

• vite version:2.1.2
• Operating System:win10
• Node version:14
• Package manager (npm/yarn/pnpm) and version:yarn 1.22.10

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[github-actions]

Hello @rashagu. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[rashagu]

here is a minimal GitHub repository: https://github.com/rashagu/vite_test1

[Aslemammad]

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

[patak-dev]

@Aslemammad I could reproduce the issue, it may end up being a problem upstream with umi-request. Maybe good to remove the outDir and base configs that are not needed for this repro. It would be great if you could dig into this and find where is the problem. Just in case it is not clear

yarn
yarn build
yarn vite preview 

Check the console for the issue. Thanks!

[Aslemammad]

@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.

[rashagu]

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

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

[Timsonrobl]

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

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

Doesn't seem to be fixing the issue for me

[Timsonrobl]

I figured out the package in my app causing the same error is https://www.npmjs.com/package/twitch
Just add it to helloworld project and add:

import { ApiClient } from "twitch";
let test = new ApiClient();

anywhere so it's not tree-shaken and the build will fail silently with same symptoms.
And "umi-request" is not a dependency for "twitch".

[patak-dev]

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.

[Innei]

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

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

Great, it also works for me. I use "umi-request": "1.3.5",

[ds300]

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 👍🏼

[Timsonrobl]

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.

[Timsonrobl]

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.

[atrakh]

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?

[Timsonrobl]

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.

[ds300]

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

[hjywyj]

npm uninstall qs
it works!

[Buggersldx]

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

HOW?

[ljharb]

Regarding #2598 (comment), the browser field absolutely is supposed to use node resolution. This is a bug with whatever is bundling the browser field incorrectly.

[patak-dev]

@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.

[Timsonrobl]

@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.

[ljharb]

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.

[buerxixi]

qs:issues ljharb/qs#406

I know the solution

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

[patak-dev]

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.

[ljharb]

Thank you!