将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致服务器重新加载时未定义错误“CodeMirror”

Posted 2023-02-22

【中文标题】将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致服务器重新加载时未定义错误“CodeMirror”

【英文标题】：Using CodeMirror with Vuejs/Nuxtjs results in error 'CodeMirror' is not defined when I the server reloads

【发布时间】：2021-11-24 13:56:47

【问题描述】：

我正在将CodeMirror 实现到我的Nuxtjs/Vuejs 应用程序中的一个文本区域。我想按照XML美化textarea。

有时CodeMirror 可以完美运行，但有时当我重新加载页面时出现错误：

Test.vue
33:18  error  'CodeMirror' is not defined  no-under

所以最初它运行良好，但是当我尝试对项目中的任何文件进行一些更改并且Nuxtjs/Vuejs 服务器再次重新加载以合并新更改时，我收到错误error 'CodeMirror' is not defined

我不明白为什么有时会收到错误消息，而其他时候却没有收到错误消息。由于我已经添加了所需的 CDN 并完成了各种答案和文章中提到的步骤，我希望它根本不会抛出错误。有人可以帮我解决这个问题吗？

后续步骤：

将 CDN 添加到我的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"

以下是我的Test.vue:

<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>

有人可以帮我解决这个问题吗？我在这里做错了什么？任何建议将不胜感激。提前致谢。

用于重新创建问题的沙盒： https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue

沙盒中的错误：

【问题讨论】：

这可能会对你有所帮助 - ***.com/questions/67360602/…

@MohibArshi 非常感谢您的回复。我试过了，但它似乎对我不起作用，错误仍然存​​在。我的Scripts 没有任何type 参数，而CSS 已标记为rel:stylesheet，因此根据答案，这应该有效。但它不适合我。你能给我一些建议吗？

nuxt 脚本上有一个 type 属性 - src: "..." type: "text/javascript"

@MohibArshi 非常感谢您的回复。我将其更改为type，但仍然出现错误。最初，它有效，但是当我强制加载页面时，它又开始抛出错误。它有时有效，有时无效。不知道这里出了什么问题。有什么帮助吗？

@MohibArshi 我尝试了一些事情，发现当我对某些文件进行更改以及nuxtjs/Vuejs 重新加载以适应我收到此错误时的更改时，问题正在发生。所以最初它工作得很好，但是当我尝试对文件进行一些更改并且Nuxtjs/Vuejs 服务器重新加载时，我收到错误error 'CodeMirror' is not defined

【参考方案1】：

您可以执行以下操作来使其正常工作。

首先，您不必在每次输入更改时重新初始化代码镜像编辑器@input="convertToJSON()" 您可以在组件挂载时初始化编辑器。

代码

<template>
  <div>
    <div class="row">
      XML Dat
      <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"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

export default 
  data() 
    return 
      xmlInput: "",
    ;
  ,
  mounted() 
    // https://***.com/questions/53981928/using-codemirror-cannot-set-property-modeoption-of-undefined
    const editor = document.getElementById("test");
    editor.value = "";
    /** eslint-next-line */
    const cm = CodeMirror.fromTextArea(editor, 
      mode: "application/xml",
      lineNumbers: true,
      matchBrackets: true,
      styleActiveLine: true,
      lineWrapping: true,
      tabSize: 2,
      value: 'console.log("Hello, World");',
    );

    cm.setSize(500, 500);
  ,
;

这是有效的代码框链接 - https://codesandbox.io/s/falling-cdn-5o0t6?file=/pages/index.vue

如果你想使用 codemirror npm 模块，这里是工作代码框的链接 - https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue

【讨论】：

非常感谢您的努力和回复。这按预期工作。你应该得到接受的答案 :) 再次感谢您的帮助，祝您有美好的一天 :)