Composition-api: help: ERROR Cannot read property 'observable' of undefined

[l2D]

📚 What are you trying to do? Please describe.
I use nuxt-use-sound for control audio files.

At first, I can't deploy because Can't find module @vueuse/sound then I added @vueuse/sound and can deploy on Google Cloud Run but It shows ERROR Cannot read property 'observable' of undefined in the log and Server error when access to the web.

It's working fine on local.

Images

🔍 What have you tried?

• Add @vueuse/sound to dependencies for trying to fix the deployment problem.
• Trying to deploy on Vercel, Got the same error but can access the web page. (Not show Server error)

ℹ️ Additional context

• nuxt-use-sound Setup must use composition-api in project.
  
  Docker file

  
  FROM node:14.16.0-alpine

ARG BUILD_ENV

RUN mkdir -p /usr/src/app
COPY package*.json /usr/src/app/
RUN cd /usr/src/app/; npm install
WORKDIR /usr/src/app
COPY . /usr/src/app

RUN npm run build

CMD [ "npm", "run", "start" ]

[danielroe]

@l2D It seems unlikely this is an isue with this library. From the error message, I would try again after adding vue to your dependencies - and you can also try to reproduce locally by only installing your production dependencies (e.g. yarn --production). Failing that, I'd like to see a reproduction. 🙏

[l2D]

Thank you for your reply and suggestion, @danielroe. Unfortunately, it's still got the same error in Local. (From my first post, I'm wrong for telling you that the local work fine. It's work fine when in npm run dev)

• I added vue to dependencies and use npm run build, build successfully but when using npm run start I got the same error.

Dependencies

Local log ( npm run build && npm run start ) :

Local log ( npm install --production && npm run build ) :

[danielroe]

@l2D In that case could you provide a reproduction? :pray: (I'd actually suggest you provide it to @vueuse/sound as it seems to originate there but I'm happy to take a look too :blush: )

[emiller12]

Hi @danielroe , I am getting the same error message in my project when I run nuxt generate

My setup is a bit different than the op's however the error message is the same so the two might be related.

I have two packages... one is a library of components built using @vue/composition-api the other is a nuxt app which has a dependency on my library package as well as on @nuxtjs/composition-api.

This works great when I run a dev build using nuxt-ts, and also nuxt-ts build passes without error... however when I run generate with nuxt-ts generate I get the following:

ℹ Full static generation activated 
ℹ Generating output directory: dist/ 
ℹ Generating pages with full static mode  
✔ Generated route "/page-without-component-from-lib" 

 ERROR   /page-with-component-from-lib 

TypeError: Cannot read property 'observable' of undefined
    at L (/my-project/packages/web-app/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:2303)
    at Z (/my-project/packages/web-app/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:3275)
    at F (/my-project/packages/web-app/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:1103)
    at setup (/my-project/packages/web-app/node_modules/my-component-library/dist/webpack:/web-common/src/components/SomeComponent.vue:57:23)
    at server.js:3784:91
    at server.js:3727:17
    at ke (node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:0)
    at server.js:3726:52
    at a.r.data (node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:0)
    at /my-project/packages/web-app/node_modules/vue/dist/vue.runtime.common.prod.js:6:28667
    at /my-project/packages/web-app/node_modules/vue/dist/vue.runtime.common.prod.js:6:28727
    at pn (/my-project/packages/web-app/node_modules/vue/dist/vue.runtime.common.prod.js:6:28934)
    at a.e._init (/my-project/packages/web-app/node_modules/vue/dist/vue.runtime.common.prod.js:6:32700)
    at new a (/my-project/packages/web-app/node_modules/vue/dist/vue.runtime.common.prod.js:6:30340)
    at Vi (/my-project/packages/web-app/node_modules/vue-server-renderer/build.prod.js:1:66341)
    at io (/my-project/packages/web-app/node_modules/vue-server-renderer/build.prod.js:1:70571)

If you don't think this is related to this issue then I am happy to create a new issue with more details about my package setup.

Thanks for all your hard work for the community with the package!

[l2D]

Hello @danielroe and @emiller12,

I try to use nuxt generate and got the same error with @emiller12 .

Entrypoint app = server.js server.js.map
ℹ Generating output directory: dist/                                                                                                        07:13:12
ℹ Generating pages                                                                                                                          07:13:12

 ERROR   /content1                                                                                                                          07:13:13

TypeError: Cannot read property 'observable' of undefined
    at L (/Users/(my_path)/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:2303)
    at Z (/Users/(my_path)/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:3275)
    at Object.F [as ref] (/Users/(my_path)/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:1103)
    at useSound (/Users/(my_path)/node_modules/@vueuse/sound/dist/cjs/index.js:13:37)
    at app.setup (.nuxt/sound.js:40:0)
    at server.js:4435:91
    at server.js:4378:17
    at ke (node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:0)
    at server.js:4377:52
    at bn.r.data (node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:15:0)
    at /Users/(my_path)/node_modules/vue/dist/vue.runtime.common.prod.js:6:28667
    at /Users/(my_path)/node_modules/vue/dist/vue.runtime.common.prod.js:6:28727
    at pn (/Users/(my_path)/node_modules/vue/dist/vue.runtime.common.prod.js:6:28934)
    at bn.e._init (/Users/(my_path)/node_modules/vue/dist/vue.runtime.common.prod.js:6:32700)
    at new bn (/Users/(my_path)/node_modules/vue/dist/vue.runtime.common.prod.js:6:30160)
    at module.exports.__webpack_exports__.default (.nuxt/server.js:82:0)

Thank you.

[danielroe]

Could either of you provide a reproduction repository?

[emiller12]

Hi @danielroe sorry about the slow reply. Living is Australia means we are a bit out of sync with the rest of the world! 😂

I have managed to recreate the issue in some new bare bones repos.

I have created a simple vue component library that just exports one dropdown component, and also a simple nuxt app that has two pages. One page imports the dropdown component and the other page does not.

As expected the page with the external page fails when running a Full Static generation. But the page without the external component gets generated fine.

If I set ssr: false in the nuxt.config.js then everything works and there is no error. However that's not what I want, I require full static generation.

Links to the repos are below. I have included a .tar of the packaged up library in the repo with the nuxt app to make it easier for you to recreate as there is no need to package up the library.

Thanks for your help. Let me know if you require any more details or have any other questions.

Sample Library: https://github.com/emiller12/sample-vue-library
Sample App: https://github.com/emiller12/sample-nuxt-app

[danielroe]

@emiller12 No apology necessary, and many thanks for the reproduction. I'll check later, but does adding your library to build.transpile make a difference?

EDIT: confirmed - adding either vue or sample-vue-library to build.transpile solves this issue.

[l2D]

@emiller12 No apology necessary, and many thanks for the reproduction. I'll check later, but does adding your library to build.transpile make a difference?

EDIT: confirmed - adding either vue or sample-vue-library to build.transpile solves this issue.

Thank you @danielroe .

I add vue to build.transpile and it's work with nuxt start and nuxt generate.

 
build: {
    transpile: ['vue'],
}

[emiller12]

Can confirm that fixed the error in my actual project repo as well. Thanks heaps for looking into that @danielroe

Glad your issue is resolved as well @l2D

[posva]

@danielroe is using build.transpile the real fix? It's as if with commonjs modules two copies of @vue/composition-api are included when building for prod with ssr mode. I see the same problem with pinia and I think it's because of https://github.com/nuxt-community/composition-api/blob/main/src/module/index.ts#L53. The server bundle ends up using the cjs.prod version of vue-composition api while an external library like pinia uses the cjs one.

This is fine for libraries with build modules as they can add the transpile option themselves but I think it would be beneficial to figure out a way to hint library developers on how they can solve this. Maybe an explicit error + docs?

[danielroe]

@posva Thanks for the thoughts - really appreciate that. I've created an issue to track (#429). If you have any further thoughts, reproductions, etc. they'd be very welcome.

[productfrontenddeveloper]

some problem

@danielroe

[rafaelmagalhaes]

I have a similar problem, none of the solutions here worked

I added Vue to build transpile and set ssr:false but no luck

TypeError: Cannot read property 'observable' of undefined

I used both examples @danielroe provided

Sample Library: https://github.com/emiller12/sample-vue-library
Sample App: https://github.com/emiller12/sample-nuxt-app

has any any got it to work ?

[danielroe]

@rafaelmagalhaes That example should just work. See https://codesandbox.io/s/competent-snow-ihgjy?file=/nuxt.config.js

[rafaelmagalhaes]

@danielroe thank you

what worked for me was updating the @nuxtjs/composition-api, to version "@nuxtjs/composition-api": "0.23.4",

I was using version 0.22 before

and I also changed to the nuxt.config

  buildModules: [
    '@nuxtjs/composition-api/modules'
  ],

i included the '/modules' at the end