为什么 Vue algolia 即时搜索在导入状态映射或路由器时会产生"Unexpected token 'export'"

Question

我在我的vue js应用程序中使用algolia即时搜索，该应用程序以ssr模式运行在类星体框架上。我想用即时搜索小部件在我的应用程序中进行路由。这里有详细的文档。

我遵循的是非常简单的指示。我导入以下内容：

import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';

然后在我的数据中，我初始化路由对象：

data() {
return {
searchClient: algoliasearch(
"",
""
),
routing: {
router: historyRouter(),
stateMapping: singleIndexMapping("instant_search"),
},
};
},

在这一点之后，如果我尝试刷新我的页面，我会得到以下错误，指向stateMappings导入和路由导入：

Unexpected token 'export'
Open: internal/modules/cjs/loader.js
Unable to locate file source.

我很确定这是因为我在ssr模式下运行我的vue quasar应用程序，但有趣的是，我只是按照quasar.conf.js文件中的指定在客户端上显式运行algolia，并在<q-no-ssr>标签中包装我编写的运行algoia即时搜索的组件：

boot: [
'axios',
{path: 'algolia', server: false},
],

<q-no-ssr>
<SearchComponent :numHits="4" :homePage="true" />
</q-no-ssr>

如何以这种方式利用算法即时搜索路由、历史记录和状态映射？

Answer 1

我在使用Algolia和Nuxt时确实遇到了同样的错误(所以没有使用类星体(。

对我来说，解决问题的方法是确保在nuxt-config:中正确地转换依赖项

build: { 
transpile: ['vue-instantsearch', 'instantsearch.js/es'], 
}, 

也许为了使它对类星体起作用，必须采取类似的行动？