algolia / algolia/instantsearch

Vite + vite-ssg : Uncaught (in promise) TypeError: r.read is not a function

Open
#5,384 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Library: Vue InstantSearch
Dominant language
TypeScript
Stars
4.1k
Forks
554
Avg merge
1d 11h
Merged PRs (30d)
51

Description

**Bug 🐞**

### What is the current behavior?
InstantSearch works in vite dev mode `vite --port 3333 --open` but not when built `vite-ssg build` : https://7c6dee15.site-596.pages.dev/experts
```
Uncaught (in promise) TypeError: r.read is not a function
at Proxy.subscribe (index.f1298e7a.js:17:13706)
at index.f1298e7a.js:17:22534
at Proxy.forEach ()
at Proxy.value (index.f1298e7a.js:17:22495)
at Proxy. (index.f1298e7a.js:29:761)
```

It comes from :
```
var Zc = function() {
var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}
, n = t.router
, r = n === void 0 ? Yc() : n
, i = t.stateMapping
, a = i === void 0 ? xc() : i;
return function(s) {
var o = s.instantSearchInstance;
function c(h) {
var f = Object.keys(h).reduce(function(v, m) {
return Lt(Lt({}, v), {}, Gi({}, m, h[m]))
}, o.mainIndex.getWidgetUiState({}))
, d = a.stateToRoute(f);
return r.createURL(d)
}
o._createURL = c;
var u = void 0
, l = o._initialUiState;
return {
onStateChange: function(f) {
var d = f.uiState
, v = a.stateToRoute(d);
(u === void 0 || !ir(u, v)) && (r.write(v),
u = v)
},
subscribe: function() {
// HERE :
o._initialUiState = Lt(Lt({}, l), a.routeToState(r.read())),
r.onUpdate(function(f) {
o.setUiState(a.routeToState(f))
})
},
started: function() {},
unsubscribe: function() {
r.dispose()
}
}
}
};
```

### Make a sandbox with the current behavior

Template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch

### What is the expected behavior?
InstantSearch to work with vite-ssg

### Does this happen only in specific situations?
Built project doesn't work while dev project is working

### What is the proposed solution?

### What is the version you are using?
A subset of dependencies I am using :
```
"dependencies": {
"algoliasearch": "^4.14.2",
"vue": "3.2.41",
"vue-instantsearch": "^4.6.0",
"vue-router": "4.1.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "3.1.2",
"@vue/compiler-sfc": "3.2.41",
"@vue/server-renderer": "3.2.41",
"vite": "3.1.8",
"vite-ssg": "0.21.1",
"webpack": "5.74.0"
}
```

Any idea how to make this work ?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue from the linked CodeSandbox template using the listed Vue, Vite, vite-ssg, Algolia, and InstantSearch versions. Compare `vite --port 3333 --open` with `vite-ssg build`, then inspect the generated `index.f1298e7a.js` around the `subscribe` call and `r.read`; done means the built `/experts` page runs InstantSearch without the promise error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.