tvdstaaij / node-git-describe

Git describe information at runtime, with semver support
36 stars 5 forks source link

Getting an error when using on Vue.js #29

Closed Jont828 closed 1 year ago

Jont828 commented 1 year ago

I'm trying to run this in my Vue.js app to get the git info by running const gitInfo = gitDescribeSync() in a component and I'm getting the following error. I've imported it as import { gitDescribeSync } from "git-describe" as well. Do you know if it's possible to get this working with Vue.js or is it just a local problem on my end? Thanks!

TypeError: Expected a function
    at createWrap (lodash.js?f6f6:5553:1)
    at Function.eval (lodash.js?f6f6:10772:1)
    at apply (lodash.js?f6f6:489:1)
    at Function.eval [as partial] (lodash.js?f6f6:6627:1)
    at gitDescribe (git-describe.js?46cb:41:1)
    at wrapper (lodash.js?f6f6:5255:1)
    at VueComponent.intervalHandler (ManagementCluster.vue?4ecc:87:1)
    at VueComponent.mounted (ManagementCluster.vue?4ecc:63:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at callHook (vue.runtime.esm.js?2b0e:4235:1)
tvdstaaij commented 1 year ago

I don't know much about Vue.js, but is possible that the call to gitDescribeSync ended up in the code that is run by the browser? That won't work, because this package is a Node.js package, not a browser package. And it could not possibly work, because the browser does not have filesystem access to the git repository.

What you probably want to do is use git-describe during the build process to determine the git information, then statically embed that data into the generated browser code. There is a Vue plugin to do exactly that.

Jont828 commented 1 year ago

Thanks for the quick response, I believe it is code that's run in the browser. I tried the Vue plugin and it doesn't seem to be working either, so I'm trying to figure out if I'm just missing something.

Jont828 commented 1 year ago

In any case, feel free to close if it's outside the scope of this project.

TimothyJones commented 1 year ago

in a component

This is exactly the part that won't work, as @tvdstaaij says - you can't run this in a browser. Even if you could successfully call gitDescribeSync in a component, it still wouldn't work, as it wouldn't be running in the git repository, so there wouldn't be anything to describe..

A plugin that embeds the output of git-describe like the vue plugin linked above is exactly what you need. If for some reason that plugin doesn't work for you, you can also embed the output of git describe in an environment variable before running the Vue build.