Ticket T1055230
Visible to All Users
Duplicate

The "Cannot read properties of undefined (reading 'render')" error occurs in Vite 2.7.6 in production bundle

created 3 years ago

As seen on reproduction there seems to be some too aggressive tree shaking occurring during the build phase.
Vendor file size reduced from 2041.35 KiB to 669.87 KiB.
Production build is broken with the same error no matter what minification option chosen: 'terser', 'esbuild' or 'false'

Reproduction

Here is a repository where issue is reproduced:
https://github.com/SlyNet/devexpress-vite-repro
With Vite 2.6.14

Code
npm i vite@2.6.14 npm run build npm run serve
Code
dist/assets/index.9eb36237.js 4.27 KiB / gzip: 1.83 KiB dist/assets/index.b831ffbc.css 751.70 KiB / gzip: 101.36 KiB dist/assets/vendor.135cef2e.js 2041.35 KiB / gzip: 563.28 KiB

Navigate to http://localhost:5000 - there is datagrid loaded, no console errors
With Vite 2.7.6

Code
npm i vite@2.7.6 npm run build npm run serve
Code
dist/assets/index.02804fb9.js 4.27 KiB / gzip: 1.83 KiB dist/assets/index.b831ffbc.css 751.70 KiB / gzip: 101.36 KiB dist/assets/vendor.26bf90b8.js 669.87 KiB / gzip: 185.42 KiB

Observe some drastic changes in vendor lib size.
Navigate to http://localhost:5000 and there is console errors"

Code
vendor.26bf90b8.js:5230 TypeError: Cannot read properties of undefined (reading 'render') at inheritor._initMarkup (:5000/assets/vendor.26bf90b8.js:32373) at inheritor._initMarkup (:5000/assets/vendor.26bf90b8.js:7411) at inheritor._renderComponent (:5000/assets/vendor.26bf90b8.js:12555) at inheritor._updateDOMComponent (:5000/assets/vendor.26bf90b8.js:12778) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:12787) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:7411) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:14433) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:7411) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:32405) at inheritor.endUpdate (:5000/assets/vendor.26bf90b8.js:7411) logError @ vendor.26bf90b8.js:5230 vendor.26bf90b8.js:32364 Uncaught TypeError: this.updateDimensions is not a function at inheritor._dimensionChanged (:5000/assets/vendor.26bf90b8.js:32364) at inheritor._dimensionChanged (:5000/assets/vendor.26bf90b8.js:7411) at Callback._fireCore (:5000/assets/vendor.26bf90b8.js:7576) at Callback.fireWith (:5000/assets/vendor.26bf90b8.js:7628) at Callback.fire (:5000/assets/vendor.26bf90b8.js:7636) at handleResize (:5000/assets/vendor.26bf90b8.js:10697)

Answers approved by DevExpress Support

created 3 years ago (modified 3 years ago)

Hi,

Thank you for the example. We're researching this issue in the context of the following thread: Vue3/React+Vite (Rollup) - DevExtreme fails in production because some modules do not pass treeshaking (no side effects).
Please bear with us.

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.