composition-api: help: ERROR Cannot read property 'observable' of undefined
📚 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/soundto 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-apiin project.
Docker file
FROM node:14.16.0-alpineARG 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” ]
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16 (6 by maintainers)
Commits related to this issue
- fix: register the composition api in a template file (#433) BREAKING CHANGE: `@vue/composition-api` is no longer transpiled by default - in addition, ensure you haven't named any layout '0' Previo... — committed to nuxt-community/composition-api by danielroe 3 years ago
- fix: register the composition api in a template file (#433) BREAKING CHANGE: `@vue/composition-api` is no longer transpiled by default - in addition, ensure you haven't named any layout '0' Previo... — committed to nuxt-community/composition-api by danielroe 3 years ago
@danielroe is using
build.transpilethe real fix? It’s as if with commonjs modules two copies of@vue/composition-apiare 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?
@emiller12 No apology necessary, and many thanks for the reproduction. I’ll check later, but does adding your library to
build.transpilemake a difference?EDIT: confirmed - adding either
vueorsample-vue-librarytobuild.transpilesolves this issue.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