Vue 3 Documentation

[salviof]

Thats not easy install matrix-js-sdk in a vue project.
with this simple import as
import * as sdkMatrix from 'matrix-js-sdk';

With this simple import, used in the Node documentation examples, we got this error:

"crypto.ts:19 Uncaught ReferenceError: global is not defined
at node_modules/matrix-js-sdk/lib/crypto/crypto.js (crypto.ts:19:12)"

maybe, in example folder shoud have a VUE 3 example,vue adopts a good architecture for creating reactive UIs ideal for chat applications.

[SubCube]

@salviof how you solved it?

[simaotwx]

Install @vitejs/plugin-legacy.

Add this to the plugin section in vite.config.js:

    // https://github.com/vitejs/vite/discussions/7915#discussioncomment-3910940
    legacy({
      targets: ['chrome >= 64', 'edge >= 79', 'safari >= 11.1', 'firefox >= 67'],
      ignoreBrowserslistConfig: true,
      renderLegacyChunks: false,
      /**
       * Polyfills required by modern browsers
       *
       * Since some low-version modern browsers do not support the new syntax
       * You need to load polyfills corresponding to the syntax to be compatible
       * At build, all required polyfills are packaged according to the target browser version range
       * But when the page is accessed, only the required part is loaded depending on the browser version
       *
       * Two configuration methods:
       *
       * 1. true
       *  - Automatically load all required polyfills based on the target browser version range
       *  - Demerit: will introduce polyfills that are not needed by modern browsers in higher versions,
       *    as well as more aggressive polyfills.
       *
       * 2、string[]
       *  - Add low-version browser polyfills as needed
       *  - Demerit: It needs to be added manually, which is inflexible;
       *    it will be discovered after the production is deployed, resulting in production failure! ! !
       */
      modernPolyfills: ['es/global-this'],
      //  or
      // modernPolyfills: true,
    }),

Add this to the top of your main.ts or main.js:

window.global = globalThis

That will fix it