BuyLog In
Ticket T1054272
Visible to All Users

Vue3/React+Vite (Rollup) - DevExtreme fails in production because some modules do not pass treeshaking (no side effects)

created 3 years ago (modified 3 years ago)

Steps to reproduce:

  1. Install yarn.
  2. Run yarn build.
  3. Run a simple web server to serve the "dist/" folder and open a browser to see it.
  4. Once the page is loaded, there are errors in the browser console.
Code
TypeError: p(...)[t] is not a function
    at t._createComponent (vendor.75ef41ee.js:5)
    at t._createComponent (vendor.75ef41ee.js:315)
    at t._createComponent (vendor.75ef41ee.js:5)
    at t._renderLayoutManager (vendor.75ef41ee.js:315)
    at t._renderLayout (vendor.75ef41ee.js:315)
    at t._initMarkup (vendor.75ef41ee.js:315)
    at t._initMarkup (vendor.75ef41ee.js:5)
    at t._renderComponent (vendor.75ef41ee.js:5)
    at t._updateDOMComponent (vendor.75ef41ee.js:5)
    at t.endUpdate (vendor.75ef41ee.js:5)
  1. Click the button - it should show a pop-up window. This happens in development but fails in production.

Workaround:
Turn off treeshaking:
vite.config.ts

JSON
export default defineConfig({
    ...
    build: {
        rollupOptions: {
            treeshake:  false 
        }
    },
    ...
});
Show previous comments (1)
PS PS
Patrick-Spiegel 3 years ago

    As vite is the new default with vue this becomes more and more important.

    FT FT
    Fran Tonković 3 years ago

      Here's another workaround while the team addresses this issue.
      Add the following to the defineConfig in vite.config.js:

      JSON
      resolve: {
    alias: {
        "devextreme/ui": 'devextreme/esm/ui'
    }
},

      credits go to: https://github.com/vitejs/vite/issues/6061#issuecomment-1015123903

      DevExpress Support Team 3 years ago

        Hello @all,

        We're working on the fix. However, due to complexity of the issue, we're unable to provide you any estimates.
        We'll keep this ticket updated once we have any news.

        @Fran,

        Thank you for sharing your workaround. We are greatly appreciate it.

        Thanks,
        Alexey

        Sign in to comment on this post

        Answers approved by DevExpress Support

        created 3 years ago (modified 3 years ago)

        Hi,

        We performed detailed research and found that the issue occurs due to the following import types in our code:

        JavaScript
        import './ui.data_grid.grid_view';

        These imports are used to add and initialize internal code to the current execution context: side effects

        Each module has the package.json file, which contains its configuration. This configuration is used by a module loader to find the appropriate compiled version (CJS or ESM) of these modules. Then, all modules are bundled by the module loader tool into a single file. While other module loaders (Webpack, Rollup) analyze both package.json and the module code, Vite performs import by the sideEffects parameter value:

        JSON
        {
  "sideEffects": false,
  "main": "../../../cjs/ui/data_grid/ui.data_grid.grid_view.js",
  "module": "../../../esm/ui/data_grid/ui.data_grid.grid_view.js"
}

        As a result, all such files are cut off from the production build.

        We analyzed a number of such modules and realized that it's necessary to significantly modify the current code base to replace "side effects" with "named" imports. While we understand the drawbacks of the current implementation, the cost of these improvements is too high and may lead to a lot of potential breaking changes in the existing API. Therefore, we don't plan them in 2022 and will update our Roadmap if we decide to get back to this task.

        In the meantime, you can use one of the following workarounds:

        • add the following resolve.alias configuration to vite.config.js:
        JSON
        resolve: {
    alias: {
        "devextreme/ui": 'devextreme/esm/ui'
    }
},
        • disable treeshaking in vite.config.ts
        JSON
        export default defineConfig({
    ...
    build: {
        rollupOptions: {
            treeshake:  false 
        }
    },
    ...
});
        • disable treeshaking only for required modules. Please check this github issue for more information

        Thanks,
        Artem

          Show previous comments (10)
          D D
          Dmitry 2 years ago

            In case of use Vite in Quasar there is a problem that the vite.config.js file is completely ignored. The solution was (as per Quasar documentation) to extend quasar.config.js as following:

            JavaScript
            build: {
  extendViteConf (viteConf, { isServer, isClient }) {
    // do something with viteConf... change it in-place
    viteConf.resolve.alias['devextreme/ui'] = 'devextreme/esm/ui'
  }
}

            Hopefully this might be helpful someone.
            Best

            MZ MZ
            Mateo Zelić 2 years ago

              Any updates on this? I don't see the roadmap containing any information. Also, the above solutions seem to be working except for the dxRichEdit component. Is there any alias for that module?

              Artem (DevExpress Support) 2 years ago

                Hi Slaven,

                We haven't established a release date for this feature yet.

                Regarding RichEdit, the component's code is not in the devextreme package. Therefore, I created a separate ticket for further research: Disable treeshaking for the RichEdit package in Vite-based applications.

                Please refer to that ticket for further correspondence.

                Sign in to comment on this post

                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.