I've integrated CodeMirror into one of the textarea elements in my Nuxtjs/Vuejs application. I want to format the textarea to resemble XML.
While the CodeMirror functions correctly at times, I encounter an error when reloading the page:
Test.vue
33:18 error 'CodeMirror' is not defined no-under
Initially, everything works fine. However, after making changes to any file in the project and allowing the Nuxtjs/Vuejs server to reload for the changes to take effect, I receive the error message
error 'CodeMirror' is not defined I'm unsure why the error occurs intermittently despite following all necessary steps including adding the required CDN links as suggested in different answers and articles. I would appreciate it if someone could assist me in resolving this issue.
Here are the steps I followed:
- Added the following CDNs to my
nuxt-config.js:Scripts:
script: [
{
src:"text/javascript",
src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"
},
{
src:"text/javascript",
src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/xml/xml.min.js"
}
],
CSS:
{
rel: "stylesheet",
href:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css"
}
This is how my Test.vue looks like:
<template>
<div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<textarea
id="test"
v-model="xmlInput"
class="form-control"
placeholder="XML Document"
spellcheck="false"
data-gramm="false"
@input="convertToJSON()"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
xmlInput: ''
}
},
methods: {
convertToJSON () {
console.log('ONE')
const cm = CodeMirror.fromTextArea(document.getElementById('test'), {
mode: 'application/xml',
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
lineWrapping: true,
tabSize: 2,
value: 'console.log("Hello, World");'
})
cm.setSize(500, 500)
}
}
}
</script>
<style scoped>
textarea {
height: 78vh;
white-space: nowrap;
resize: both;
}
::-webkit-input-placeholder {
color: #f1948a;
text-align: center;
}
</style>
If anyone could provide assistance with this issue, I would greatly appreciate it. Please let me know where I might be going wrong or if you have any suggestions. Thank you in advance.
Sandbox link for reproducing the issue: https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
Error in Sandbox image: https://i.sstatic.net/tTTEq.png