Genesys Cloud - Developer Community!

 View Only

Sign Up

Back to discussions
Expand all | Collapse all

Javascript SDK needs a hack to work with latest Vue.js template

  • 1.  Javascript SDK needs a hack to work with latest Vue.js template

    Posted 2 hours ago

    I attempted to update one of my Vue.js projects to use the latest Vue.js project template, and found that attempting to compile the project resulted in an error. I used Copilot to help me figure out how to get it to compile, but Copilot thought suggested reporting the issue so that it can be fixed...

    This is how to replicate the issue:

    1. Create a blank Vue.js project:

    ```

    $ npm init vue@latest

    > npx
    > "create-vue"

    ┌  Vue.js - The Progressive JavaScript Framework
    │
    ◇  Project name (target directory):
    │  vue-project
    │
    ◇  Use TypeScript?
    │  Yes
    │
    ◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
    │  none
    │
    ◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
    │  none
    │
    ◇  Skip all example code and start with a blank Vue project?
    │  Yes

    Scaffolding project in /home/nick/nttnz/vue-project...
    │
    └  Done. Now run:

       cd vue-project
       npm install
       npm run dev

    | Optional: Initialize Git in your project directory with:

       git init && git add -A && git commit -m "initial commit"

    ```

    2. Install default dependencies and add Genesys SDK as a dependency:

    ```

    $ cd vue-project

    $ npm install

    added 150 packages, and audited 151 packages in 12s

    36 packages are looking for funding
      run `npm fund` for details

    found 0 vulnerabilities

    $ npm install purecloud-platform-client-v2

    added 56 packages, and audited 207 packages in 3s

    45 packages are looking for funding
      run `npm fund` for details

    found 0 vulnerabilities

    ```

    3. Edit src/App.vue, and add import line below:

    ```

    <script setup lang="ts">
    import platformClient from 'purecloud-platform-client-v2';
    </script>

    <template>
      <h1>You did it!</h1>
      <p>
        Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
        documentation
      </p>
    </template>

    <style scoped></style>

    ```

    4. Build the project:

    ```

    $ npm run build

    > vue-project@0.0.0 build
    > run-p type-check "build-only {@}" --


    > vue-project@0.0.0 type-check
    > vue-tsc --build


    > vue-project@0.0.0 build-only
    > vite build

    vite v8.1.4 building client environment for production...
    ✓ 12 modules transformed.
    ✗ Build failed in 362ms
    error during build:
    Build failed with 1 error:

    [MISSING_EXPORT] "default" is not exported by "node_modules/purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js".
       ╭─[ src/App.vue?vue&type=script&setup=true&lang.ts:3:8 ]
       │
     3 │ import platformClient from "purecloud-platform-client-v2";
       │        ───────┬──────
       │               ╰──────── Missing export
    ───╯

        at aggregateBindingErrorsIntoJsError (file:///home/nick/nttnz/vue-project/node_modules/rolldown/dist/shared/error-BHRSI0R7.mjs:48:18)
        at unwrapBindingResult (file:///home/nick/nttnz/vue-project/node_modules/rolldown/dist/shared/error-BHRSI0R7.mjs:18:128)
        at #build (file:///home/nick/nttnz/vue-project/node_modules/rolldown/dist/shared/rolldown-build-CtPvmZgJ.mjs:3276:34)
        at async buildEnvironment (file:///home/nick/nttnz/vue-project/node_modules/vite/dist/node/chunks/node.js:33011:66)
        at async Object.build (file:///home/nick/nttnz/vue-project/node_modules/vite/dist/node/chunks/node.js:33433:19)
        at async Object.buildApp (file:///home/nick/nttnz/vue-project/node_modules/vite/dist/node/chunks/node.js:33430:153)
        at async CAC.<anonymous> (file:///home/nick/nttnz/vue-project/node_modules/vite/dist/node/cli.js:776:3) {
      errors: [Getter/Setter]
    }
    ERROR: "build-only" exited with 1.

    ```

    FYI The hack that makes it work is the addition of the mainFields attribute in vite.config.ts:

    ```

    import { fileURLToPath, URL } from 'node:url'

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueDevTools from 'vite-plugin-vue-devtools'

    // https://vite.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        vueDevTools(),
      ],
      resolve: {
        mainFields: ['module', 'jsnext:main', 'browser'],
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
      },
    })

    ```

    The advice from Copilot was: "Raise an issue with Genesys, because the package metadata leads modern bundlers to an artifact that doesn't match the ESM export contract."


    #PlatformSDK

    ------------------------------
    Nick Tait
    Genesys Consultant
    ------------------------------


Related Content