search

elastic / search-ui

Search UI. Libraries for the fast development of modern, engaging search experiences.
https://docs.elastic.co/search-ui
Apache License 2.0
1.92k stars 368 forks source link

Vue Demo is broken #1019

Closed ColeDCrawford closed 8 months ago

ColeDCrawford commented 8 months ago

Mentioned in https://github.com/elastic/search-ui/issues/1008, but that was closed without addressing this. Tagging @TattdCodeMonkey and @joemcelroy from that issue.

Describe the bug The Vue demo will not compile.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/p/devbox/search-ui-vue-example-9n9l3n, which is linked to by https://docs.elastic.co/search-ui/guides/using-with-vue-js. The source code is at https://github.com/elastic/search-ui/tree/main/examples/vue.
  2. See that it doesn't compile. Vite is throwing this error: Internal server error: @vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.
  3. Try building locally. This currently looks set up to use node v16.14 - lots of EBADENGINE warning level build errors due to packages requiring v18+. But the core failure looks to be this: 
    npm ERR! code 1
npm ERR! path /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector
npm ERR! command failed
npm ERR! command sh -c npm run build
npm ERR! > @elastic/search-ui-app-search-connector@1.20.2 build
npm ERR! > npm run clean && npm run build-js
npm ERR! 
npm ERR! 
npm ERR! > @elastic/search-ui-app-search-connector@1.20.2 clean
npm ERR! > rimraf lib
npm ERR! 
npm ERR! 
npm ERR! > @elastic/search-ui-app-search-connector@1.20.2 build-js
npm ERR! > ./bin/build-js
npm ERR! npm WARN ignoring workspace config at /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector/.npmrc 
npm ERR! npm WARN ignoring workspace config at /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector/.npmrc 
npm ERR! npm WARN ignoring workspace config at /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector/.npmrc 
npm ERR! ./bin/build-js: line 2: ./node_modules/.bin/tsc: No such file or directory
npm ERR! ./bin/build-js: line 5: ./node_modules/.bin/tsc: No such file or directory
npm ERR! npm ERR! Lifecycle script `build-js` failed with error: 
npm ERR! npm ERR! Error: command failed 
npm ERR! npm ERR!   in workspace: @elastic/search-ui-app-search-connector@1.20.2 
npm ERR! npm ERR!   at location: /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector 
npm ERR! npm ERR! Lifecycle script `build` failed with error: 
npm ERR! npm ERR! Error: command failed 
npm ERR! npm ERR!   in workspace: @elastic/search-ui-app-search-connector@1.20.2 
npm ERR! npm ERR!   at location: /Users/colecrawford/GitHub/search-ui/packages/search-ui-app-search-connector

    This looks like an issue with the rimraf library?

Expected behavior The Vue example should build and run.

Screenshots

Screenshot 2024-02-20 at 5 49 00 PM
TattdCodeMonkey commented 8 months ago

I was able to fix this locally and resolve the rimraf error, it required removing the vue example from the top level npm workspace.

But it does appear to still be broken in codesandbox, which seems to be a different error that I do not see locally.

The error there being @vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. But as far as I can tell we're not using an @vnode-* hooks, not too familiar with Vue myself to know if this error is a red herring for something else.