help: ERROR Cannot read property 'observable' of undefined #415

l2D · 2021-03-24T04:08:39Z

📚 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" ]

The text was updated successfully, but these errors were encountered:

danielroe · 2021-03-24T07:44:50Z

@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 · 2021-03-24T09:47:59Z

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 · 2021-03-24T10:07:41Z

@l2D In that case could you provide a reproduction? 🙏 (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 😊 )

emiller12 · 2021-03-24T23:41:23Z

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 · 2021-03-25T00:20:39Z

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 · 2021-03-25T07:38:43Z

Could either of you provide a reproduction repository?

emiller12 · 2021-03-26T05:50:40Z

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 · 2021-03-26T08:20:27Z

@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 · 2021-03-26T15:38:32Z

@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 · 2021-03-29T05:23:06Z

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 · 2021-03-31T13:58:26Z

@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 · 2021-04-01T09:06:44Z

@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.

BREAKING CHANGE: `@vue/composition-api` is no longer transpiled by default - in addition, ensure you haven't named any layout '0' Previously `@vue/composition-api` was transpiled which led to problems depending on other libraries (namely, they had to be added to `build.transpile` to work - see #429 for summary). This fixes that issue (and solves #415 properly) This uses a hack to solve that, by using a _layout_ to register Vue Composition API. (By using a key of '0' it ensures that it appears first in `Object.keys` ahead of any other layout, although users should ensure they haven't named any layout '0'.) **Key notes**: * `@vue/composition-api` is yet again a runtime dependency - so do add it separately to your `dependencies` or add it back into `build.transpile` if that's appropriate for your situation. reverts #391

productdevbook · 2021-04-18T13:26:46Z

some problem

@danielroe

rafaelmagalhaes · 2021-05-12T15:59:58Z

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 · 2021-05-13T14:30:15Z

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

rafaelmagalhaes · 2021-05-13T14:34:46Z

@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

l2D assigned danielroe Mar 24, 2021

l2D changed the title ~~ERROR Cannot read property 'observable' of undefined help:~~ help: ERROR Cannot read property 'observable' of undefined Mar 24, 2021

danielroe added the needs-repro Waiting for code that can reproduce the issue label Mar 25, 2021 — with Volta.net

danielroe removed the needs-repro Waiting for code that can reproduce the issue label Mar 26, 2021

l2D mentioned this issue Mar 27, 2021

Module not found: Error: Can't resolve '@vueuse/sound' in 'node_modules/.cache/nuxt' Tahul/nuxt-use-sound#1

Closed

danielroe closed this as completed Mar 31, 2021

danielroe reopened this Mar 31, 2021

danielroe mentioned this issue Apr 1, 2021

fix: interoperate better with other libraries #429

Closed

danielroe closed this as completed Apr 1, 2021

danielroe mentioned this issue Apr 2, 2021

fix: register the composition api in a template file #433

Merged

productdevbook mentioned this issue Apr 18, 2021

useDark: Cannot read property 'observable' of undefined vueuse/vueuse#462

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

help: ERROR Cannot read property 'observable' of undefined #415

help: ERROR Cannot read property 'observable' of undefined #415

l2D commented Mar 24, 2021 •

edited

Loading

danielroe commented Mar 24, 2021

l2D commented Mar 24, 2021

danielroe commented Mar 24, 2021

emiller12 commented Mar 24, 2021 •

edited

Loading

l2D commented Mar 25, 2021

danielroe commented Mar 25, 2021

emiller12 commented Mar 26, 2021

danielroe commented Mar 26, 2021 •

edited

Loading

l2D commented Mar 26, 2021

emiller12 commented Mar 29, 2021

posva commented Mar 31, 2021

danielroe commented Apr 1, 2021

productdevbook commented Apr 18, 2021 •

edited

Loading

rafaelmagalhaes commented May 12, 2021

danielroe commented May 13, 2021

rafaelmagalhaes commented May 13, 2021

help: ERROR Cannot read property 'observable' of undefined #415

help: ERROR Cannot read property 'observable' of undefined #415

Comments

l2D commented Mar 24, 2021 • edited Loading

danielroe commented Mar 24, 2021

l2D commented Mar 24, 2021

danielroe commented Mar 24, 2021

emiller12 commented Mar 24, 2021 • edited Loading

l2D commented Mar 25, 2021

danielroe commented Mar 25, 2021

emiller12 commented Mar 26, 2021

danielroe commented Mar 26, 2021 • edited Loading

l2D commented Mar 26, 2021

emiller12 commented Mar 29, 2021

posva commented Mar 31, 2021

danielroe commented Apr 1, 2021

productdevbook commented Apr 18, 2021 • edited Loading

rafaelmagalhaes commented May 12, 2021

danielroe commented May 13, 2021

rafaelmagalhaes commented May 13, 2021

l2D commented Mar 24, 2021 •

edited

Loading

emiller12 commented Mar 24, 2021 •

edited

Loading

danielroe commented Mar 26, 2021 •

edited

Loading

productdevbook commented Apr 18, 2021 •

edited

Loading