Latest version does not work with Vue.js?

[seo-j]

I'm trying to use version 1.20 with Vue.js on Electron, but a error "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" occurred.

Error details are:

Promise.then (async) |   |  
-- | -- | --
  | getBandsAndPrepareContainer | @ | init.js?3b7d:205
  | eval | @ | init.js?3b7d:252
  | Promise.then (async) |   |  
  | init | @ | init.js?3b7d:245
  | configure | @ | configure.js?f0d3:194
  | Ideogram | @ | ideogram.js?89ba:153
  | mounted | @ | Ideogram.vue?2ca5:10
  | invokeWithErrorHandling | @ | vue.runtime.esm.js?2b0e:1854
  | callHook | @ | vue.runtime.esm.js?2b0e:4219
  | insert | @ | vue.runtime.esm.js?2b0e:3139
  | invokeInsertHook | @ | vue.runtime.esm.js?2b0e:6346
  | patch | @ | vue.runtime.esm.js?2b0e:6565
  | Vue._update | @ | vue.runtime.esm.js?2b0e:3945
  | updateComponent | @ | vue.runtime.esm.js?2b0e:4066
  | get | @ | vue.runtime.esm.js?2b0e:4479
  | Watcher | @ | vue.runtime.esm.js?2b0e:4468
  | mountComponent | @ | vue.runtime.esm.js?2b0e:4073
  | Vue.$mount | @ | vue.runtime.esm.js?2b0e:8415
  | eval | @ | main.ts?bc82:16
  | ./src/main.ts | @ | app.js:1507
  | __webpack_require__ | @ | app.js:849
  | fn | @ | app.js:151
  | 1 | @ | app.js:1580
  | __webpack_require__ | @ | app.js:849
  | checkDeferredModules | @ | app.js:46
  | (anonymous) | @ | app.js:925
  | (anonymous) | @ | app.js:928

My code is same as the example for Vue on GitHub.

<template>
  <div id="ideo-container" />
</template>

<style lang="scss" scoped>
#ideo-container {
  height: 300px;
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Ideogram from "ideogram";

@Component
export default class IdeogramPlot extends Vue {
  mounted() {
    return new Ideogram({
      organism: "human",
      container: "#ideo-container"
    });
  }
}
</script>

I also remove and re-installed version 0.13 for the test. It was the version described in package.json of example. Then it worked with same code in my environment. Does anyone use latest version with Vue.js successfully?

[Eric Weitz]

Hi @seo-j, your stack trace includes:

  | getBandsAndPrepareContainer | @ | init.js?3b7d:205
  | eval | @ | init.js?3b7d:252
  | Promise.then (async) |   |  
  | init | @ | init.js?3b7d:245

However, Ideogram.js has not used eval for over a year -- eval was removed in v1.9.0. This might mean you're somehow using v0.13.0 when you intend to use v1.20.0.

Could you please post the output of these commands on your machine, in the case that triggers the error?

npm list | grep ideogram

grep -A 1 "ideogram" package-lock.json 

[seo-j]

Hi @eweitz, thank you for your reply.

Here is a result from your indicated commands.

+-- ideogram@1.20.0

ideogram@^1.20.0:
  version "1.20.0"
  resolved "https://registry.yarnpkg.com/ideogram/-/ideogram-1.20.0.tgz#e721e7bd16bb838fec875a46a43360b0d5a47ebe"
  integrity sha512-NxdwkuYtIDtdsfrzLajOHsAUTsgk/Q8kIuk3gg6ygaXfmKfAz43mpuSGB/vnXU9XnkfFgumWZ0FEa3YZFhw5VQ==

I'm using yarn as package manager and I thought it may be problem by reading your comment. So I tried to install all dependencies with npm after removing node_modules and *.lock. But result was same.

[Eric Weitz]

@seo-j, this should now be fixed. Could you try re-installing the example again from https://github.com/eweitz/ideogram/tree/master/examples/vue#ideogram-in-vue, and let me know if you encounter any problems?

[seo-j]

Hi @eweitz, thank you for your quick update. I could use an ideogram successfully in both your example and my application. But I found:

• Version 1.20 is specified in the package.json in the example
• Both 1.20 and 1.21 worked with the new example code.
• Without dataDir option described in the new example, both 1.20 and 1.21 does not work. Same error shows up.

Is this behavior correct as you intended? Should I put dataDir option every time in Vue.js?

[Eric Weitz]

@seo-j, yes, please use dataDir for now. I will look into making that implicit and robust in the next release, and will ensure that declaring it explicitly still works.

[seo-j]

@eweitz , I see. Thank you for you kind response.