[Bug]: [vue-runtime] TypeError: Cannot read properties of null (reading 'isCE')

[or2e]

Description

toRefs() expects a reactive object but received a plain one.
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
TypeError: Cannot read properties of null (reading 'isCE')
    at Object.renderSlot (/workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2937:34)
    at /workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@yeger/vue-masonry-wall/dist/masonry-wall.umd.js:13:1841
    at Object.renderList (/workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2874:22)
    at /workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@yeger/vue-masonry-wall/dist/masonry-wall.umd.js:13:1751
    at Object.renderList (/workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2874:22)
    at Proxy.<anonymous> (/workspaces/vodoley/vodoley-frontend/.output/server/node_modules/@yeger/vue-masonry-wall/dist/masonry-wall.umd.js:13:1395)
    at renderComponentRoot (file:///workspaces/vodoley/vodoley-frontend/.output/server/chunks/handlers/renderer.mjs:2961:45)
    at renderComponentSubTree (file:///workspaces/vodoley/vodoley-frontend/.output/server/chunks/handlers/renderer.mjs:10597:51)
    at renderComponentVNode (file:///workspaces/vodoley/vodoley-frontend/.output/server/chunks/handlers/renderer.mjs:10526:16)
    at Object.ssrRenderComponent (file:///workspaces/vodoley/vodoley-frontend/.output/server/chunks/handlers/renderer.mjs:10946:12)

Reproduction

Nuxt project info: 01:03:48

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.4
• Vue Version: 3.2.37
• Package Manager: [email protected]
• Builder: vite

---

The error is only thrown in the production build

Additional context

No response

Preferences

• I want to be assigned to and work on this issue myself

[DerYeger]

Interesting, the library works fine with Vite's SSR and SSG. This seems like a Nuxt 3/Vue Renderer bug, considering the stack trace.

[dosstx]

I wanted to say that I also just got this error when using it with nuxt 3 rc4 (not sure if the previous rc versions have the same issue).

[DerYeger]

This is an issue of Nuxt 3, see nuxt/nuxt#13117.
Perhaps nuxt/nuxt#13117 can fix the problem.

[dosstx]

OK, I am not sure if I did this right, but I added this to my nuxt config:

    vite: {
        logLevel: 'info',
        optimizeDeps: {
            include: [
                '@yeger/vue-masonry-wall'
            ]
        }
    },

Unfortunately, I still get the same error above. @or2e Can you let me know if you get this fixed and post the solution here?

[or2e]

@dosstx dosstx

Studied the code of some Nuxt3 modules. Need to add:
https://v3.nuxtjs.org/guide/going-further/esm/#transpiling-libraries

[DerYeger]

@dosstx dosstx

Studied the code of some Nuxt3 modules. Need to add: https://v3.nuxtjs.org/guide/going-further/esm/#transpiling-libraries

Thank you very much for the workaround!
I added the required config changes to the README.

[DerYeger]

I just released v3.0.38 that should fix the issue without requiring the above workaround.
It also enables SSR support without defining a stub for the ResizeObserver.

[ManUtopiK]

I'm not sure this issue is correctly solved. I got the same error using "@yeger/vue-masonry-wall": "^3.0.42".
I use "nuxt": "3.0.0-rc.6" and node 16.15.1.

I added

 build: {
    transpile: ['@yeger/vue-masonry-wall'],
 }

to my nuxt.config.ts and it works well.

[DerYeger]

I'm not sure this issue is correctly solved. I got the same error using "@yeger/vue-masonry-wall": "^3.0.42". I use "nuxt": "3.0.0-rc.6" and node 16.15.1.

I added

 build: {
    transpile: ['@yeger/vue-masonry-wall'],
 }

to my nuxt.config.ts and it works well.

Looks like the migration to Vite 3 broke something. In the meantime, you could use 3.0.38 3.0.39. I gave that a try and it worked. See https://stackblitz.com/edit/github-enexbp?file=package.json,plugins%2Fvue-masonry-wall.ts,app.vue.

[DerYeger]

I narrowed it down to v3.0.40 of this library.
Since there's only one change, Nuxt 3 seems to be having issues with the valid .mjs extension.

[DerYeger]

Reported upstream at nuxt/nuxt#14375

[DerYeger]

Will be closed by nuxt/nuxt#13632.

[MogliCodes]

I'm not sure this issue is correctly solved. I got the same error using "@yeger/vue-masonry-wall": "^3.0.42". I use "nuxt": "3.0.0-rc.6" and node 16.15.1.

I added

 build: {
    transpile: ['@yeger/vue-masonry-wall'],
 }

to my nuxt.config.ts and it works well.

I had the same error using nuxt 3.0.0-rc.6 and v3.0.43 of this library. Adding

build: {
        transpile: ['@yeger/vue-masonry-wall'],
    },

to nuxt.config.ts resolved the issue.

[danielroe]

We now add vue as an external by default. Let me know if this issue still persists.

(We can track any remaining issues in nuxt/nuxt#13632.)

[DerYeger]

We now add vue as an external by default. Let me know if this issue still persists.

(We can track any remaining issues in nuxt/nuxt.js#13632.)

Awesome! I'll close this issue for now.

[danielroe]

Sorry - originally posted thinking this was an issue in nuxt/framework - didn't mean to tell you to close it 😆