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

[alex-galey]

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 (<anonymous>)
    at Proxy.value (index.f1298e7a.js:17:22495)
    at Proxy.<anonymous> (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 ?

[Haroenv]

Do you have the code that generates this? it seems like routing was partially applied only,

[alex-galey]

What's quite incredible is I am not able to reproduce the issue here as I am not even able to import the component the same way I did in my project : import InstantSearch from 'vue-instantsearch/vue3/es/src/components/InstantSearch'

Here the error for the import from the build log :

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/runner/work/BugBuild/BugBuild/vue-instantsearch-vue3/node_modules/vue-instantsearch/vue3/es/src/components/InstantSearch' imported from /home/runner/work/BugBuild/BugBuild/vue-instantsearch-vue3/.vite-ssg-temp/main.mjs

I can give you access to the main project which produces the initial issue if you want ?

[Haroenv]

The file you should import is InstantSearch.vue I think, as vite doesn't automatically add the extension. A minimal reproduction would still be best here

[alex-galey]

Yes, I am still working on a minimal reproduction of the issue.

Error: [vite]: Rollup failed to resolve import "vue-instantsearch/vue3/es/src/components/InstantSearch.vue" from "src/App.vue"

There is no InstantSearch.vue, only InstantSearch.js : find node_modules/vue-instantsearch/. | grep InstantSearch

node_modules/vue-instantsearch/./vue3/es/src/util/createInstantSearchComponent.js.map
node_modules/vue-instantsearch/./vue3/es/src/util/createInstantSearchComponent.js
node_modules/vue-instantsearch/./vue3/es/src/components/InstantSearch.js
node_modules/vue-instantsearch/./vue3/es/src/components/InstantSearch.js.map
node_modules/vue-instantsearch/./vue3/es/src/components/InstantSearchSsr.js.map
node_modules/vue-instantsearch/./vue3/es/src/components/InstantSearchSsr.js
node_modules/vue-instantsearch/./vue2/es/src/util/createInstantSearchComponent.js.map
node_modules/vue-instantsearch/./vue2/es/src/util/createInstantSearchComponent.js
node_modules/vue-instantsearch/./vue2/es/src/components/InstantSearch.js
node_modules/vue-instantsearch/./vue2/es/src/components/InstantSearch.js.map
node_modules/vue-instantsearch/./vue2/es/src/components/InstantSearchSsr.js.map
node_modules/vue-instantsearch/./vue2/es/src/components/InstantSearchSsr.js
node_modules/vue-instantsearch/./src/util/createInstantSearchComponent.js
node_modules/vue-instantsearch/./src/components/InstantSearch.js
node_modules/vue-instantsearch/./src/components/__tests__/InstantSearch.js
node_modules/vue-instantsearch/./src/components/__tests__/__snapshots__/InstantSearch.js.snap
node_modules/vue-instantsearch/./src/components/__tests__/InstantSearch-integration.js
node_modules/vue-instantsearch/./src/components/__tests__/InstantSearchSsr.js
node_modules/vue-instantsearch/./src/components/InstantSearchSsr.js

I also tried to import with the .js extenstion, that's the issue :

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'instantsearch.js' imported from /home/alex/Documents/AA-Matchers/Dev-Site/BugBuild/vue-instantsearch-vue3/.vite-ssg-temp/main.mjs
Did you mean to import instantsearch.js@4.48.1_algoliasearch@4.14.2/node_modules/instantsearch.js/es/connectors/index.js?

• Should I use createInstantSearchComponent to instanciate an InstantSearch component ?
• Does it make sense to use SSR approach in this SSG context ?

[Haroenv]

If you could share an empty repository with this failing import, we'll be able to investigate further where this error is actually coming from :)

[alex-galey]

Sure, it's indeed the repo here in a previous comment, with the build log attached. Do you have an access ?

What's quite incredible is I am not able to reproduce the issue here as I am not even able to import the component the same way I did in my project : import InstantSearch from 'vue-instantsearch/vue3/es/src/components/InstantSearch'

Here the error for the import from the build log :

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/runner/work/BugBuild/BugBuild/vue-instantsearch-vue3/node_modules/vue-instantsearch/vue3/es/src/components/InstantSearch' imported from /home/runner/work/BugBuild/BugBuild/vue-instantsearch-vue3/.vite-ssg-temp/main.mjs

I can give you access to the main project which produces the initial issue if you want ?

[alex-galey]

@Haroenv have you been able to check the reproduction of the failed import on the repository ?

[Haroenv]

I've been able to reproduce it, but not what the cause is unfortunately, it seems that the rules of which files are imported are different. Sorry!