"Symbol() not found" when shipping library

[bcakmakoglu]

Hi,

So I've noticed that I get a warning that the injection Symbol() was not found when I ship my library in production.
In development everything works without any warnings.

Am I doing something wrong?

This is an example of how I use the stores:

const pinia = createPinia()

export default (id: string, preloadedState: State) => {
  setActivePinia(pinia)

  const store: StoreDefinition<string, State, Getters, Actions> = defineStore({
  ....

Everything works fine, no issues whatsoever - it's just the pesky warning that will not leave me alone.

From what I saw Pinia uses Symbol() when process.env.NODE_ENV is production and there's also no fallback value specified for the injection.
Is there a particular reason for this?
Could undefined be specified as the fallback so the warning will stop?

Thanks for taking the time to read this and have a nice week 🦾

[posva]

Hi, I'm glad you are enjoying pinia!

I don't understand the error you are seeing or what you are trying to do. You should share a more complete example but it looks very different from what is indicated in docs

The Symbol not having a name is just for a better size.

[bcakmakoglu]

What I'm trying to do is create a store outside of an actual app but inside a component tree.
I have a bunch of components that are supposed to interact together and for that I use Pinia.

// Container.vue

const props = defineProps<Props>()
const store = useStore() 
store.setSomething(props.something)

...

// Child.vue

const props = defineProps<Props>()
const store = useStore() 
const someVal = store.getSomething()
...

That's basically what I am shipping in my library; There is no main.ts file that would initialize and mount a Vue-App,
so app.use(pinia) is not called instead I use setActivePinia() before returning a store.

I'm sort of doing it as described in the Testing section of the docs:

beforeEach(() => {
    // creates a fresh pinia and make it active so it's automatically picked
    // up by any useStore() call without having to pass it to it:
    // `useStore(pinia)`
    setActivePinia(createPinia())
  })

Though 'm doing it once when calling useStore() in the Container.vue-setup.

// Container.vue

const props = defineProps<Props>()
const store = useStore() 
store.setSomething(props.something)


// useStore.ts
const pinia = createPinia()

export default (id: string, preloadedState: State) => {
  setActivePinia(pinia)

  const store: StoreDefinition<string, State, Getters, Actions> = defineStore({
  ....

It does work as I would expect it to, so there's no issue in functionality that I could detect.
It's just that the Injection Warning appears when I use the library in another project as the library is then in production mode so process.env.NODE_ENV is production and pinia uses Symbol() instead of Symbol('pinia').

Thanks a lot for your help :)

[posva]

You have to call app.use(pinia). It cannot work without it

[bcakmakoglu]

It does work though but regardless I changed it to include the app.use call.

My packages' main file looks like this:

import { createPinia } from 'pinia'
const app = createApp({})
app.use(createPinia())
export { default as SomeComponent } from './SomeComponent.vue'
export * from './foobar'

This works as well, nothing broke but rwhen I build the library, install it in another project and use it, I still get the warning:
[Vue warn]: injection "Symbol()" not found.

[bcakmakoglu]

Me again; I set up pinia exactly as the docs describe but I'm still getting the warning. I don't think the warning has anything to do with the pinia setup.
As far as I can tell the warning is thrown because of the following:

function useStore(pinia, hot) {
        const currentInstance = getCurrentInstance();
        pinia =
            // in test mode, ignore the argument provided as we can always retrieve a
            // pinia instance with getActivePinia()
            ((process.env.NODE_ENV === 'test') && activePinia && activePinia._testing ? null : pinia) ||
                (currentInstance && inject(piniaSymbol)); // <----- This is throwing the warning
                

Couldn't that line be changed to inject(piniaSymbol, undefined) ?
That would solve the warning and wouldn't change what the line does anyway, would it?

Thanks for your help :)

[bcakmakoglu]

[posva]

I'm unmarking this as the answer because it would be dangerous for people to follow this and break in unexpected and hard-to-debug ways

[bcakmakoglu]

Have a nice week and thanks anyway

[posva]

I personally suggest using inject/provide for libraries if you need to pass around state. It's lighter and should cover most of the cases. (I didn't get you were talking about a library and not an Application)

If you still think a store will help you, you need to add pinia as a peer dependency of the project, make sure it is marked as an external lib when bundling your lib (you can check this by verifying your lib has imports from pinia in its code), and let the user call app.use(pinia) themselves.

Calling setActivePinia() works for testing stores, not for apps because it will skip any plugins and that's why there is createTestingPinia().

It's also important to note that having multiple pinia instances in one app is dangerous because there can only be one active pinia at a time and if the wrong pinia is active when useStore() is called, the store will be created with the wrong state.

[bcakmakoglu]

Well, this answers my problem far more thoroughly than the responses before and makes it clear what you were trying to get across.
Thanks!

So instead of using pinia I should implement a state by using inject/provide myself and providing a state that way, am I understanding you right?

[bcakmakoglu]

Thanks to your explanation I was able to solve it, though I won't be using pinia for this case anymore!
I'll still use it for different cases (like in an actual App) =)

[posva]

So instead of using pinia I should implement a state by using inject/provide myself and providing a state that way, am I understanding you right?

Yes! I don't know the whole picture but usually, for libs, inject/provide is perfect for shared state. It's still fine if you don't need pinia 😄

[AmareshKulkarni]

Hi @posva, I am running into a similar issue, and like your help with the above comment. I am using Pinia with a Nuxt app (Vue2). Everything works fine if I were to define the store within the nuxt app .

I also have a component library (child dependency), that I am trying to add pinia stores, and the nuxt app imports this library. Also when I build and publish this library, I exclude the pinia as an external in web pack configuration as suggested.

For the stores imported from the library, I run into [Vue warn]: Injection "Symbol(pinia)" not found.

Typically in Nuxt app, we don't use app.use(pinia).. So referring back to your comment, is there a way to get around this problem in the case of Nuxt?

, and let the user call app.use(pinia) themselves.

Appreciate any insights.

[krckyboy]

Friendly bump to @AmareshKulkarni's problem.