vue-codemirror + vite4 = nothing

thisVioletHydra commented 1 year ago

Describe the bug

    "@codemirror/lang-java": "^6.0.1",
    "@codemirror/lang-markdown": "^6.0.5",
    "@codemirror/state": "^6.1.4",
    "@codemirror/theme-one-dark": "^6.1.0",
    "@codemirror/view": "^6.7.1",
    "@intlify/unplugin-vue-i18n": "^0.8.1",
    "@zebing/vite-plugin-css-modules": "^1.1.0",
    "ant-design-vue": "^3.2.15",
    "auto-changelog": "^2.4.0",
    "codemirror": "^6.0.1",
    "esbuild": "^0.16.6",
    "jsonlint": "^1.6.3",
    "jsonlint-mod": "^1.7.6",
    "pinia": "^2.0.28",
    "postcss-load-config": "^4.0.1",
    "vite-plugin-implicit-css-modules": "^0.0.3",
    "vite-plugin-vsharp": "^1.3.0",
    "vite-plugin-vue-static-css-modules": "^3.0.3",
    "vue": "^3.2.45",
    "vue-codemirror": "^6.1.1",
    "vue-codemirror6": "^1.1.1",
    "vue-cookie-next": "^1.3.0",
    "vue-demi": "^0.13.11",
    "vue-i18n": "^9.2.2",
    "vue-router": "4.1.6",
    "vue-toastification": "^2.0.0-rc.5"
           ...
   "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
    "unplugin-auto-import": "^0.12.1",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^4.0.1",

Hi, I did everything according to the guide, as a result, nothing works. no code highlighting there is nothing Even the out of the box option doesn't work.

Reproduction

<template>
   <div>
   <Codemirror
            v-model="value"
            basic
            wrap
            tab
            :dark="dark"
            :lang="lang"
            :extensions="extensions"
            :options="cmOption"
          ></Codemirror>
        </div>
        //....
</template>
<!-- SCRIPT -->
<script lang="ts" setup>
  import { Codemirror } from 'vue-codemirror';
  import { markdown as md } from '@codemirror/lang-markdown';
  import type { LanguageSupport } from '@codemirror/language';
  import type { Extension } from '@codemirror/state';
  import type { ViewUpdate } from '@codemirror/view';
  import { oneDark } from '@codemirror/theme-one-dark';

  console.log(`[LOG] oneDark`, `<${typeof oneDark}>`, oneDark);

  const value = ref(`
  adw
  da
  widthwad
  awda
  widthawd
  awdawdawdwd

  `);

  /** Dark mode **/
  const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches);

  /**
   * CodeMirror Language
   *
   * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}
   */
  const lang: LanguageSupport = md();
  const extensions = [md(), oneDark];
  const cmOption = ref({
    lineNumbers: true,
  });
        </script>

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 2.38 GB / 15.83 GB
  Binaries:
    Node: 19.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.46)
    Internet Explorer: 11.0.22000.120

Used Package Manager

yarn

Validations

[X] Read the the documentation in detail.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

LaKing commented 1 year ago

It seems that the import statements are missing for vue's internal stuff, like ref ... Vite throws without log, but the inspector jumps to the debugger.

Here is a working template:


<template>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
  />
</template>

<script>
  import { defineComponent, ref } from 'vue'
  import { Codemirror } from 'vue-codemirror'
  import { javascript } from '@codemirror/lang-javascript'
  import { oneDark } from '@codemirror/theme-one-dark'

  export default defineComponent({
    components: {
      Codemirror
    },
    setup() {
      const code = ref(`console.log('Hello, world!')`)
      const extensions = [javascript(), oneDark]

      return {
        code,
        extensions,

      }
    }
  })
</script>

thisVioletHydra commented 1 year ago

    "unplugin-auto-import": "^0.12.1",
    "unplugin-vue-components": "^0.22.12",
i used this libs, do u know what is it? no need always import vue or other stuff, vite will do it automatically I think the problem is something else 🤔

WebMechanic commented 1 year ago

no need always import vue or other stuff, vite will do it automatically

@thisVioletHydra both plugins only import from folders you previously defined, esp. auto-import which handles regular ESM exports needs care and can skip over files and their exports you'd expect to be available. I eventually droped it for being too unreliable and only use unplugin-vue-components for .vue imports.

surmon-china / vue-codemirror