The requested module does not provide an export named

[JohnyDyxt]

Hi,

I got :

The requested module '/node_modules/vue-rewards/dist/vue-rewards.umd.cjs?import' does not provide an export named 'useReward'

Here's my code :

CONFIG :

@quasar/app-vite@1.7.3 vue@3.3.13

Thank for helping

[HamadaFMahdi]

Hi!

I just tried it with a fresh vue3 + vite project and it works fine.

Here's the one I made: https://codesandbox.io/p/devbox/vue-rewards-test-73q2ct

[JohnyDyxt]

Hello and thank you for your response.

Unfortunately, it's impossible to get it to work at my place. Perhaps it's because I'm using the Quasar framework and their Vite plugin?

[cpilson]

This feels like a Quasar issue.

Specifically, it would be unsurprising if this page were the ultimate resolution; I'm new to Quasar and new to Vue so this is all fairly puzzling.

https://quasar.dev/app-extensions/tips-and-tricks/provide-a-ui-component/

@JohnyDyxt are you still struggling with this? There's at least TWO of us if so! (Update: I'm now using canvas-confetti, e-z.)

I took a swipe at it, no luck:

app/src/boot/vue-rewards.js:

import { boot } from 'quasar/wrappers';
import VueRewards, { useReward } from 'vue-rewards';

export default boot(({ app }) => {
  app.config.globalProperties.$VueRewards = VueRewards;
  app.config.globalProperties.$useReward = useReward;
});
export { useReward };

app/quasar.config.js:

// app boot file (/src/boot)
  // --> boot files are part of "main.js"
  // https://v2.quasar.dev/quasar-cli-vite/boot-files
  boot: [
    ...
    'vue-rewards',
  ],
  ...

Vue component where it's used:

<script setup lang="ts">
...
import { useReward } from 'src/boot/vue-rewards';
const { reward: fullPageReward } = useReward('full-page', 'confetti', { startVelocity: 10, spread: 180, elementCount: 100 });
...
        $q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted',
          onDismiss: () => {
            fullPageReward();
            ctaDialog.value = false;
          }
        });