hasOwn undefined error in production Chrome < 93

Original message was deleted

peerreynders•4/9/24, 9:57 PM

Vite's transforms always seem to be performed with esbuild, it doesn't matter whether it's a dev or production build (production bundling is handled with Rollup)

https://github.com/vitejs/vite/discussions/2213#discussioncomment-401225

Vite only performs syntax transforms, not polyfills (that's what @vitejs/plugin-legacy@vitejs/plugin-legacy is for).

https://vitejs.dev/guide/build#browser-compatibility

build.targetbuild.target is an input to the esbuild transform

https://vitejs.dev/config/build-options.html#build-target

https://esbuild.github.io/api/#target

Experiment:

// file: test.js
const object1 = {
  prop: 'exists',
};

console.log(Object.hasOwn(object1, 'prop'));
// Expected output: true

console.log(Object.hasOwn(object1, 'toString'));
// Expected output: false

console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// Expected output: false

console.log(object?.noprop);

// file: test.js
const object1 = {
  prop: 'exists',
};

console.log(Object.hasOwn(object1, 'prop'));
// Expected output: true

console.log(Object.hasOwn(object1, 'toString'));
// Expected output: false

console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// Expected output: false

console.log(object?.noprop);

Command Line

esbuild test.js --target=es2015,edge88,firefox78,chrome87,safari14

esbuild test.js --target=es2015,edge88,firefox78,chrome87,safari14

Output

"use strict";
const object1 = {
  prop: "exists"
};
console.log(Object.hasOwn(object1, "prop"));
console.log(Object.hasOwn(object1, "toString"));
console.log(Object.hasOwn(object1, "undeclaredPropertyValue"));
console.log(object == null ? void 0 : object.noprop);

"use strict";
const object1 = {
  prop: "exists"
};
console.log(Object.hasOwn(object1, "prop"));
console.log(Object.hasOwn(object1, "toString"));
console.log(Object.hasOwn(object1, "undeclaredPropertyValue"));
console.log(object == null ? void 0 : object.noprop);

So hasOwnhasOwn isn't covered by esbuild's syntax transforms, so a polyfill is needed.

3b. Are you using @vitejs/plugin-legacy@vitejs/plugin-legacy? While referenced in the issue you referred to, it's not clear whether you are using it.

The fact that the explicit hasOwn.shim()hasOwn.shim() didn't seem to monkeypatch the
```
Object
```
```
Object
```
global is strange but it does need to be run first thing at the entry point.

Alternately modify the page and put this script tag early, before the bundle:

<script>
"hasOwn"in Object||(Object.hasOwn=Object.call.bind(Object.hasOwnProperty));
</script>

<script>
"hasOwn"in Object||(Object.hasOwn=Object.call.bind(Object.hasOwnProperty));
</script>

Credit: has-ownhas-own

GitHub

GitHub - ungap/has-own: An Object.hasOwn polyfill.

An Object.hasOwn polyfill. Contribute to ungap/has-own development by creating an account on GitHub.

Vite

Next Generation Frontend Tooling

esbuild - API

Vite

Next Generation Frontend Tooling

GitHub

Confused about esbuild and Rollup · vitejs vite · Discussion #2213

Am I right in thinking esbuild is used when running vite serve, and Rollup is used when running vite build? I got confused when reading about build.target as I thought builds were performed with Ro...

peerreynders•4/9/24, 9:59 PM

FYI: there was a followup issue to the one you referenced

https://github.com/vitejs/vite/discussions/16082

GitHub

@vitejs/plugin-legacy: polyfills vs modernPolyfills · vitejs vite ·...

I am using Vite with CSR React app. I updated the app's dependencies recently to their latest version and everything is working well in development and production in modern browsers. One of the...

hasOwn undefined error in production Chrome < 93

Similar Threads

Similar Threads

Similar Threads