In my Vue and Webpack project, I am trying to incorporate the Ace editor. My goal is to associate each file with a single instance of an Ace Document. To achieve this, I followed the default import method:
import Ace from 'ace-builds'
When attempting to create a Document using the code snippet below:
let doc = new Ace.Ace.Document('')
I keep encountering the error message in Chrome dev tools:
TypeError: Cannot read property Document' of undefined at FileTree.vue:177Even using let doc = new Ace.Document('') did not resolve the issue.
I have a standalone JavaScript file that imports Ace and functions correctly. You can view the code here: editor.js
Below are the relevant parts of my code within the Vue methods block:
addFile (e) {
let tree = this.$refs.maintree
if (this.currentNode === undefined) {
this.currentNode = tree.getNode(1)
}
this.openAddFilePrompt().then(({value}) => {
let doc = new Ace.Ace.Document('')
if (this.currentNode.data.detail.type === 'file') {
let parentNode = this.currentNode.parent
tree.append({detail: {type: 'file', src: '', document: doc}, id: this.maxId++, label: value}, parentNode)
return
}
this.maxId++
tree.append({detail: {type: 'file', src: '', document: doc}, id: this.maxId, label: value}, this.currentNode)
}).catch((err) => {
console.log(err)
})
},
This is the content of my d.ts file for ace-builds:
After reviewing the picture, you can see that the Document interface is located within an Ace namespace. Since I imported the entire module as Ace, I believe that I should instantiate a Document Object using new Ace.Ace.Document, following the pattern of
defaultImport.Namespace.InterfaceThe structure of the Document interface is as follows. I installed ace-builds through npm:
export interface Document extends EventEmitterHere is the folder structure of ace-builds:
My question is:
Why is my import statement not functioning properly, and why am I unable to create the Document Object? I have provided all the information I believe might be helpful in resolving my issue.