surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.28k stars 382 forks source link

Object(...) is not a function at eval (vue-codemirror.esm.js:7:1) #212

Open isaacfink opened 1 year ago

isaacfink commented 1 year ago

Describe the bug

I have the following component

<template>
  <Codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
    @change="console.log($event)"
    @focus="console.log('focus', $event)"
    @blur="console.log('blur', $event)"
  />
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import Icon from '../Icon.vue'
  import { Codemirror } from 'vue-codemirror'
  import { sql } from '@codemirror/lang-sql'
  import { oneDark } from '@codemirror/theme-one-dark'

  @Component({
    components: { Icon, Codemirror },
    props: {
      label: {
        type: String,
        default: ''
      },
      error: {
        type: Boolean,
        default: false
      },
      value: {
        type: String,
        default: ''
      }
    },

    mounted () {
      console.log('mmounted code editor')
    }
  })
  export default class TextareaCode extends Vue {
    code: string = ''
    event:string = ''
    extensions = [sql(), oneDark]
    handleReady = () => {}
  }
</script>

But I am getting the following error in the console

Object(...) is not a function
    at eval (vue-codemirror.esm.js:7:1)

I am not sure where to even look, is this a bug or is there something wrong with my implementation?

Reproduction

just the code above

System Info

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.31 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
    pnpm: 8.6.12 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 113.1.51.118
    Chrome: 118.0.5993.117
    Safari: 17.0
  npmPackages:
    @babel/core: 7.8.4 => 7.8.4 
    @babel/helper-environment-visitor: ^7.18.9 => 7.18.9 
    @babel/plugin-syntax-jsx: ^7.8.3 => 7.10.4 
    @codemirror/lang-javascript: ^6.2.1 => 6.2.1 
    @codemirror/lang-sql: ^6.5.4 => 6.5.4 
    @codemirror/theme-one-dark: ^6.1.2 => 6.1.2 
    @mathieustan/vue-datepicker: ^0.2.11 => 0.2.11 
    @rive-app/canvas: ^1.1.8 => 1.2.1 
    @splidejs/vue-splide: ^0.3.5 => 0.3.5 
    @types/lodash: 4.14.170 => 4.14.170 
    @types/socket.io-client: ^1.4.33 => 1.4.33 
    @types/vue-the-mask: ^0.11.0 => 0.11.0 
    @types/vue2-datepicker: ^3.3.4 => 3.3.4 
    @types/vuelidate: ^0.7.15 => 0.7.15 
    @vue/babel-helper-vue-jsx-merge-props: ^1.0.0 => 1.0.0 
    @vue/babel-preset-app: ^4.3.1 => 4.5.4 
    @vue/babel-preset-jsx: ^1.1.2 => 1.1.2 
    @vue/cli-plugin-babel: 4.1.0 => 4.1.0 
    @vue/cli-plugin-e2e-cypress: 4.1.0 => 4.1.0 
    @vue/cli-plugin-eslint: 4.1.0 => 4.1.0 
    @vue/cli-plugin-pwa: 4.1.0 => 4.1.0 
    @vue/cli-plugin-router: 4.1.0 => 4.1.0 
    @vue/cli-plugin-typescript: 4.1.0 => 4.1.0 
    @vue/cli-plugin-unit-jest: 4.1.0 => 4.1.0 
    @vue/cli-plugin-vuex: 4.1.0 => 4.1.0 
    @vue/cli-service: 4.1.0 => 4.1.0 
    @vue/eslint-config-standard: 4.0.0 => 4.0.0 
    @vue/eslint-config-typescript: 4.0.0 => 4.0.0 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    accounting-js: ^1.1.1 => 1.1.1 
    axios: ^0.19.0 => 0.19.2 
    babel-loader: ^8.1.0 => 8.1.0 
    babel-plugin-syntax-jsx: ^6.18.0 => 6.18.0 
    babel-plugin-transform-vue-jsx: ^4.0.1 => 4.0.1 
    chart.js: ^3.0.0 => 3.9.1 
    cli-color: ^2.0.3 => 2.0.3 
    codemirror: ^6.0.1 => 6.0.1 
    core-js: ^3.4.3 => 3.6.5 
    cross-env: 7.0.0 => 7.0.0 
    detect-browser: ^5.2.0 => 5.2.0 
    eslint: 5.16.0 => 5.16.0 
    eslint-plugin-vue: 5.0.0 => 5.0.0 
    husky: ^3.1.0 => 3.1.0 
    jwt-decode: ^2.2.0 => 2.2.0 
    lodash.debounce: ^4.0.8 => 4.0.8 
    lodash.groupby: ^4.6.0 => 4.6.0 
    lodash.range: ^3.2.0 => 3.2.0 
    lodash.sortby: ^4.7.0 => 4.7.0 
    lodash.throttle: ^4.1.1 => 4.1.1 
    lodash.uniq: ^4.5.0 => 4.5.0 
    lodash.uniqby: ^4.7.0 => 4.7.0 
    luhn: ^2.4.1 => 2.4.1 
    moment: ^2.24.0 => 2.27.0 
    moment-countdown: ^0.0.3 => 0.0.3 
    moment-timezone: ^0.5.40 => 0.5.40 
    ms: ^2.1.3 => 2.1.3 
    node-sass: 4.12.0 => 4.12.0 
    register-service-worker: ^1.6.2 => 1.7.1 
    sass-loader: 8.0.0 => 8.0.0 
    socket.io-client: ^3.1.3 => 3.1.3 
    sortablejs: ^1.10.2 => 1.10.2 
    tiptap: 1.29.3 => 1.29.3 
    tiptap-extensions: 1.31.3 => 1.31.3 
    typescript: 3.7.7 => 3.7.7 
    uuid: ^9.0.0 => 9.0.0 
    v-tooltip: ^2.1.3 => 2.1.3 
    vue: ^2.6.10 => 2.6.12 
    vue-auto-virtual-scroll-list: ^0.3.0 => 0.3.0 
    vue-chartjs: ^4.1.1 => 4.1.1 
    vue-class-component: ^7.0.2 => 7.2.5 
    vue-cli-plugin-svg: 0.1.3 => 0.1.3 
    vue-click-outside: 1.1.0 => 1.1.0 
    vue-codemirror: ^6.1.1 => 6.1.1 
    vue-cookies: ^1.8.3 => 1.8.3 
    vue-custom-scrollbar: ^1.4.4 => 1.4.4 
    vue-debounce-decorator: ^1.0.1 => 1.0.1 
    vue-ellipse-progress: ^1.3.1 => 1.3.1 
    vue-multiselect: ^2.1.6 => 2.1.6 
    vue-numeric: ^2.5.0 => 2.5.0 
    vue-property-decorator: 9.1.2 => 9.1.2 
    vue-router: ^3.1.3 => 3.4.3 
    vue-template-compiler: ^2.6.11 => 2.6.12 
    vue-the-mask: ^0.11.1 => 0.11.1 
    vue-virtual-scroller: ^1.0.10 => 1.0.10 
    vue2-animate: ^2.1.4 => 2.1.4 
    vue2-datepicker: ^3.10.2 => 3.10.2 
    vue2-filters: ^0.14.0 => 0.14.0 
    vue2-teleport: ^1.0.1 => 1.0.1 
    vuejs-datepicker: ^1.6.2 => 1.6.2 
    vuelidate: ^0.7.7 => 0.7.7 
    vuelidate-error-extractor: ^2.4.1 => 2.4.1 
    vuex: ^3.1.2 => 3.5.1 
    vuex-module-decorators: ^0.11.0 => 0.11.0


### 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](https://discord.surmon.me).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.