vue-codemirror
vue-codemirror copied to clipboard
Object(...) is not a function at eval (vue-codemirror.esm.js:7:1)
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.