Covergence and Vue web application

Hi guys, I’m developing a web application to use Vue.js, vue-router, monaco, vue-monaco, Convergence, and Monaco Collaborative Extensions. Now, I’m trying to translate Collaborative Monaco Editor example
using native javascript to vue.js. It’s very hard for me because I’m beginner coder. I guess I did a lot of effot and time so I did well so far but I’m facing one error I can’t solve it by myself.

The error is here

> webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Editor.vue?vue&type=script&lang=js&:52 Could not open model  TypeError: Cannot read property 'ColorAssigner' of undefined
>     at new MonacoConvergenceAdapter (webpack-internal:///./src/components/MonacoConvergenceAdapter.js:31)
>     at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Editor.vue?vue&type=script&lang=js&:49)

My vue file is here

/* eslint-disable no-unused-vars */
<template>
    <MonacoEditor class="editor" v-model="code" theme="vs-dark" language="javascript" @editorWillMount="editorWillMount " @editorDidMount="editorDidMount"/>
</template>

<script>
import MonacoEditor from 'vue-monaco';
import Convergence from '@convergence/convergence';
import MonacoConvergenceAdapter from './MonacoConvergenceAdapter';

const username = Math.floor(Math.random() * 100) + "号";
const CONVERGENCE_URL = "http://localhost:8000/api/realtime/convergence/default";


export default {
  name: "Editor",
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: 'const noop = () => {}',
      editor: null,
      monaco: null,
    }
  },

  methods: {
    editorWillMount(model) {
      this.monaco = model;
      console.log("Editor is Mount");
    },
    editorDidMount(editor) {
      this.editor = editor;
      Convergence.connectAnonymously(CONVERGENCE_URL, username)
      .then(domain => {
        // Now open the model, creating it using the initial data if it does not exist.
        return domain.models().openAutoCreate({
          collection: "example-monaco",
          id: convergenceExampleId,
          data: {
            "text": defaultEditorContents
          }
        })
      })
      .then((model) => {
        console.log(model);
        const adapter = new MonacoConvergenceAdapter(this.editor, this.code);
        console.log(adapter);
        // adapter.bind();
      })
      .catch(error => {
        console.error("Could not open model ", error);
      });
    }
    }
}

</script>

<style>
   ...
</style>

And, this is monaco-adapter.js I rent from example. And, I fixed the import to connect vue.

import MonacoCollabExt from '@convergencelabs/monaco-collab-ext';
import ConvergenceColorAssigner from "@convergence/color-assigner";

export default class MonacoConvergenceAdapter {

    constructor(monacoEditor, realtimeString) {
      this._monacoEditor = monacoEditor;
      this._model = realtimeString;
      this._colorAssigner = new ConvergenceColorAssigner.ColorAssigner();
    }

    bind() {
      this._initSharedData();
      this._initSharedCursors();
      this._initSharedSelection();
    }
    ...
}

I guess the error is saying I didn’t be able to made ColorAssigner. I check functions in Convergence/color-assignter but I coundn’t understand why I can’t lunch the ColorAssigner instance. Please Any help.

Welcome junseinagao!

In our example it appears we are importing it a different way:

import {ColorAssigner} from "@convergence/color-assigner"

For this sort of thing, I usually just set a breakpoint (say, in the constructor of MonacoConvergenceAdapter) in order to see exactly what is getting returned by webpack after it processes this dependency.

Thank you for replying! Thanks to your help, I solved this error. I’m facing next error, I gonna challenging it.

I solved this error use

import {ColorAssigner} from "@convergence/color-assigner" instead of import ConvergenceColorAssigner from "@convergence/color-assigner";

and

replace
this._colorAssigner = new ConvergenceColorAssigner.ColorAssigner();

to

this._colorAssigner = new ColorAssigner();

Great! Glad we could help.