algolia / instantsearch

🐛 Current behavior

I've recently spin up a new project with Algolia's frontend components in VueJS 3 and Parcel Bundler. After building for production I got this exact error. I thought since I used Vite in other projects, I will switch. However after switching I experience exactly the same. It's extremely strange and I struggle to find any references.

The error seems to appear on exactly this line.

instantsearch/packages/vue-instantsearch/src/components/InstantSearch.js

Line 108 in 14f1235

[this.suit()]: true,

TypeError: this.suit is not a function
    at Proxy.<anonymous> (InstantSearch.js:108:17)
    at Proxy.<anonymous> (index-vue3.js:46:15)
    at $7d9e3aaaff0e7cc2$var$renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at $56868e3a4276600d$export$28352bb4dd362521.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5701:46)
    at $56868e3a4276600d$export$28352bb4dd362521.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5814:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5822:5)
    at mountComponent (runtime-core.esm-bundler.js:5612:5)
    at processComponent (runtime-core.esm-bundler.js:5565:9)
    at patch (runtime-core.esm-bundler.js:5040:11)
$7d9e3aaaff0e7cc2$var$logError @ runtime-core.esm-bundler.js:226
$7d9e3aaaff0e7cc2$export$d3da1ecaf1206c58 @ runtime-core.esm-bundler.js:208
$7d9e3aaaff0e7cc2$var$renderComponentRoot @ runtime-core.esm-bundler.js:853
componentUpdateFn @ runtime-core.esm-bundler.js:5701
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
processFragment @ runtime-core.esm-bundler.js:5499
patch @ runtime-core.esm-bundler.js:5014
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
(anonymous) @ pixi.js:7

I'm exhauested but I wanted to put it out. I will expose the source code tomorrow. :)

🔍 Steps to reproduce

git clone https://github.comhttps://github.com/malgodt/pixi" target="_blank" rel="nofollow; cd pixi; npm i && npm build.

then try serving dist folder with any tools. I used php -S localhost:8000 -t dist.

Live reproduction

https://github.com/malgodt/pixi

💭 Expected behavior

It should simply work the same way it does on dev.

Package version

vue-instantsearch-4.10.0

Operating system

No response

Browser

No response

Code of Conduct

I agree to follow this project's Code of Conduct

Do you have a reproducible example? I wonder if something in your setup is renaming internal references, and thus doesn't keep the name of a property set by a mixin (suit), but that definitely would cause other issues too.

To be able to help, we'll need you to reproduce this somewhere debuggable first :)

@Haroenv I've created the repository. Nevermind the index or key details since the bug happens before any request is even made. I've also, after playing with Vite reverted back to Parcel since the error persisted. Thank you :)

Thanks, but the error only happened with a specific usage of Vite right? could you recreate that specific setup? As tried parcel works

Sorry for confusion. It actually happened with both of them. I tried switching to Vite for hopefully a relieve but it didn't help so I went back. Did you try the production build and did it actually tried to make the network request?

I can reproduce this now indeed, although I don't yet know the cause

Hi, I had the same error on my project, I managed to fix the error by enabling the API option.

Vue InstantSearch v4 is coded in Vue 3 but using the API option.

At the code level you just have to do:

.addPlugin(new webpack.DefinePlugin({
         __VIEW_OPTIONS_API__: true,
     }))

by default VUE_OPTIONS_API is true

On your project I see that you activate VUE_OPTIONS_API only in dev mode, it must always be activated.

Thanks for that insight @bilel99, can you clarify where you see we're using that option? I can see that it's set to true default according to https://github.com/vuejs/core/blob/main/packages/vue/README.md#bundler-build-feature-flags, but we're not using that option in the build as far as I can tell 🤔

Indeed, I talk about the problem of @flexchar.
On his git repository I can see that the __VIEW_OPTIONS_API__ is activated only in dev mode, but it must be activated even in production mode. Otherwise InstantSearch will generate the following error: this.suit is not a function.
https://github.com/malgodt/pixi/blob/develop/src/pixi.js

sorry for the misunderstanding @Haroenv

Ah, that indeed was the issue, I didn't notice it in the code. I'll close the issue now, have a great day everyone!

`TypeError: this.suit is not a function` when using production build