Unrecognized extension value in extension set ([object Object]) when working with vue-mirror

[helxsz]

Describe the bug

chunk-P4Q3QBM3.js?v=13caf26d:16802 Uncaught (in promise) Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Reproduction

                            <div class="flex-col ">

                                <div class="w-[620px] h-[550px] overflow-y-auto">
                                        <codemirror
                                        ref="mymirror"
                                        :autofocus="true"
                                        :placeholder="$t('commons.noData')"
                                        :indent-with-tab="true"
                                        :tabSize="4"
                                        style="height: calc(550px)"
                                        :lineWrapping="true"
                                        :matchBrackets="true"
                                        theme="cobalt"
                                        :styleActiveLine="true"
                                        :extensions="extensions"
                                        v-model="selectedData"
                                        :disabled="disabled"
                                    />
                                </div>   
                            </div>   

<script setup lang="ts">

import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
const mymirror = ref();
const extensions = [javascript() ]; 
const selectedData = ref('');
const disabled = ref(false);

</script>

System Info

System:
    OS: macOS 11.7.10
    CPU: (4) x64 Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz
    Memory: 82.81 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.6.7 - /usr/local/bin/pnpm
    bun: 1.0.20 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 16.6.1
  npmPackages:
vue: ^3.2.47 => 3.4.21 
codemirror: ^6.0.1 => 6.0.1 
vue-codemirror: ^6.1.1 => 6.1.1

Used Package Manager

npm

Validations

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

[Panda2Chan]

A similar error, my error is

chunk-YJMCY73I.js?v=cd83157c:4605 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'extension')

[aixiafeifly]

vue-codemirror.js?v=c53436f2:4940 Uncaught (in promise) Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

[lyywy5]

A similar error, my error is

chunk-YJMCY73I.js?v=cd83157c:4605 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'extension')

CodeMirror version issues