Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Troubleshooting Valaxy's Pinia Integration Error in Development Environment #362

Open
WRXinYue opened this issue Feb 27, 2024 · 0 comments

Comments

@WRXinYue
Copy link
Contributor

Problem Description

When utilizing the built-in Pinia in Valaxy and referencing useExampleStore from stores/app.ts within a component, an error occurs. Specifically, in the development environment, if caching is not performed, the following error is encountered:

Uncaught (in promise) Error: [Valaxy] site config not properly injected in app
    at useValaxyConfig (config.ts:64:11)
    at useSiteConfig (config.ts:81:18)
    at setup (App.vue:25:20)
    at callWithErrorHandling (runtime-core.esm-bundler.js?v=9c7cd2b6:190:19)
    at setupStatefulComponent (runtime-core.esm-bundler.js?v=9c7cd2b6:7594:25)
    at setupComponent (runtime-core.esm-bundler.js?v=9c7cd2b6:7555:36)
    at mountComponent (runtime-core.esm-bundler.js?v=9c7cd2b6:5886:7)
    at processComponent (runtime-core.esm-bundler.js?v=9c7cd2b6:5852:9)
    at patch (runtime-core.esm-bundler.js?v=9c7cd2b6:5318:11)
    at render (runtime-core.esm-bundler.js?v=9c7cd2b6:6641:7)

Minimum Reproduction Steps

  1. Create a stores/app.ts file under the theme directory.

  2. Add the following code to stores/app.ts:

    import { ref } from 'vue'
    import { acceptHMRUpdate, defineStore } from 'pinia'
    
    export const useExampleStore = defineStore('example', () => {
      const loadMultiple = ref(1)
    
      function handLoadMore() {
        loadMultiple.value++
      }
    
      return {
        loadMultiple,
        handLoadMore,
      }
    })
    
    if (import.meta.hot) {
      import.meta.hot.accept(acceptHMRUpdate(useExampleStore, import.meta.hot))
    }
  3. Import and use useExampleStore in any Vue component (components directory .vue file) within the <script setup> block:

    <script setup lang="ts">
    import { useExampleStore } from '../stores/app'
    
    const store = useExampleStore()
    </script>
  4. Observe the above error after initially starting the project or after updating npm packages, resetting cache.

Expected Behavior

Expect useExampleStore to work normally without causing errors, even without caching.

Actual Behavior

Upon initially starting the project or after updating npm packages, resetting cache, the aforementioned error occurs, indicating that the Valaxy site configuration was not correctly injected into the application.

Environment Information

  • Valaxy: ^0.18.5
  • Browser: Version 122.0.6261.57 (Official Build) (64-bit)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant