全部。我目前正在做一个React + Electron项目，该项目的目标是完成一个markdown编辑器。当我配置 codemirror 时，
程序报告错误，未捕获错误:扩展集中无法识别扩展值([object Object])。有时会发生这种情况，因为加载了多个 @codemirror/state 实例，破坏了 instanceof 检查。
评论的部分会产生这样的错误，所以我目前评论这部分。
import { useEffect, useState, useRef } from "react"
import { EditorState } from '@codemirror/state'
import { EditorView, keymap, highlightActiveLine } from '@codemirror/view'
import { defaultKeymap } from '@codemirror/commands'
import { history, historyKeymap } from '@codemirror/history'
import { indentOnInput } from "@codemirror/language"
import { bracketMatching } from "@codemirror/matchbrackets"
import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
import { defaultHighlightStyle } from "@codemirror/highlight"
import type React from "react"
interface Props {
initialDoc: string,
onChange?: (state: EditorState) => void
}
const useCodeMirror = <T extends Element>(
props: Props
): [React.MutableRefObject<T | null>, EditorView?] => {
const refContainer = useRef<T>(null)
const [editorView, setEditorView] = useState<EditorView>()
const { onChange } = props
useEffect(() => {
if (!refContainer.current) return
const startState = EditorState.create({
doc: props.initialDoc,
extensions: [
keymap.of([...defaultKeymap, ...historyKeymap]),
// lineNumbers(),
// highlightActiveLineGutter(),
// history(),
// indentOnInput(),
// bracketMatching(),
// defaultHighlightStyle.fallback,
highlightActiveLine(),
EditorView.lineWrapping,
EditorView.updateListener.of(update => {
if (update.changes) {
onChange && onChange(update.state)
}
})
]
})
const view = new EditorView({
state: startState,
parent: refContainer.current
})
setEditorView(view)
}, [refContainer])
return [refContainer, editorView]
}
export default useCodeMirror
这是我的package.json
{
"name": "vite-electron-builder",
"description": "Secure boilerplate for Electron app based on Vite",
"private": true,
"author": {
"email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147f7b6e75777f617a7d677b7260547379757d783a777b79" rel="noreferrer noopener nofollow">[email protected]</a>",
"name": "Alex Kozack",
"url": "https://kozack.me"
},
"main": "packages/main/dist/index.cjs",
"scripts": {
"build": "npm run build:main && npm run build:preload && npm run build:renderer",
"build:main": "cd ./packages/main && vite build",
"build:preload": "cd ./packages/preload && vite build",
"build:renderer": "cd ./packages/renderer && vite build",
"compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
"test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
"test:e2e": "npm run build && vitest run",
"test:main": "vitest run -r packages/main --passWithNoTests",
"test:preload": "vitest run -r packages/preload --passWithNoTests",
"test:renderer": "vitest run -r packages/renderer --passWithNoTests",
"watch": "node scripts/watch.mjs",
"lint": "eslint . --ext js,mjs,cjs,ts,mts,cts,vue",
"typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
"typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
"typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer",
"postinstall": "cross-env ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs",
"format": "npx prettier --write \"**/*.{js,mjs,cjs,ts,mts,cts,vue,json}\""
},
"devDependencies": {
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"@vue/test-utils": "2.0.2",
"cross-env": "7.0.3",
"electron": "20.1.1",
"electron-builder": "23.3.3",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"happy-dom": "6.0.4",
"nano-staged": "0.8.0",
"playwright": "1.25.1",
"simple-git-hooks": "2.8.0",
"typescript": "4.8.2",
"unplugin-auto-expose": "0.0.3",
"vite": "3.1.0",
"vitest": "0.23.1"
},
"dependencies": {
"@codemirror/commands": "^6.1.0",
"@codemirror/gutter": "^0.19.9",
"@codemirror/highlight": "^0.19.8",
"@codemirror/history": "^0.19.2",
"@codemirror/lang-javascript": "^6.0.2",
"@codemirror/language": "^6.2.1",
"@codemirror/matchbrackets": "^0.19.4",
"@codemirror/state": "^6.1.1",
"electron-updater": "5.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"resolutions": {
"@codemirror/highlight": "0.19.7",
"@codemirror/lang-javascript": "0.19.7",
"@codemirror/state": "0.19.9",
"@codemirror/view": "0.19.47"
}
}
这是npm list @codemirror/state 命令显示的结果，
vite-electron-builder@ /Users/scott/Desktop/Electron-editor
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8e8280808c83899eaddbc3dcc3dd" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d0a1f0a1b3e48504f504f" rel="noreferrer noopener nofollow">[email protected]</a> deduped
│ └─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44322d213304726a766a76" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b3b4a1b4a580f6eef1eef1" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6502101111001725554b545c4b5c" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efcefe0e9ebfdebfacebea0bfb7a0b7" rel="noreferrer noopener nofollow">[email protected]</a>
│ │ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60131401140520504e51594e59" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfacabbeabba9feff1eee6f1e6" rel="noreferrer noopener nofollow">[email protected]</a>
│ └─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addbc4c8daed9d839c94839995" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a3a4b1a4b590e0fee1e9fee9" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4cccdc3ccc8cdc3ccd0e4948a959d8a9c" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a565b545d4f5b5d5f7a0a140b03140b0a" rel="noreferrer noopener nofollow">[email protected]</a>
│ │ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40333421342500706e71796e79" rel="noreferrer noopener nofollow">[email protected]</a> deduped
│ ├── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b686f7a6f7e5b2b352a223522" rel="noreferrer noopener nofollow">[email protected]</a>
│ └─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5839c9082b5c5dbc4ccdbc1cd" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbb8bfaabfae8bfbe5faf2e5f2" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8382989f849992abdbc5dad2c5d9" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3f382d38290c7c627d756275" rel="noreferrer noopener nofollow">[email protected]</a>
│ └─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6d0cfc3d1e69688979f88929e" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9d9a8f9a8baedec0dfd7c0d7" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a060b040d47000b1c0b190918031a1e2a5c445a4458" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e2f6f7ece0eceef3efe6f7e6c3b5adb2adb3" rel="noreferrer noopener nofollow">[email protected]</a>
│ │ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473433263322077169766976" rel="noreferrer noopener nofollow">[email protected]</a> deduped
│ ├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcb0b5b2a89ceaf2ecf2ec" rel="noreferrer noopener nofollow">[email protected]</a>
│ │ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1f180d18092c5a425d425d" rel="noreferrer noopener nofollow">[email protected]</a> deduped
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a4a3b6a3b297e1f9e6f9e6" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b9b4bbb2a0b4b2b095e3fbe7fbe4" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8e899c8998bdcbd3ccd3cc" rel="noreferrer noopener nofollow">[email protected]</a> deduped
├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e535f4a5d565c4c5f5d555b4a4d7e0e100f07100a" rel="noreferrer noopener nofollow">[email protected]</a>
│ ├─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc3cec1c8dacec8caef9f819e96819e9f" rel="noreferrer noopener nofollow">[email protected]</a>
│ │ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbeb9acb9a88dfde3fcf4e3f4" rel="noreferrer noopener nofollow">[email protected]</a> deduped
│ ├── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b282f3a2f3e1b6b756a627562" rel="noreferrer noopener nofollow">[email protected]</a>
│ └─┬ @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22544b475562120c131b0c161a" rel="noreferrer noopener nofollow">[email protected]</a>
│ └── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1e190c19082d5d435c544354" rel="noreferrer noopener nofollow">[email protected]</a> deduped
└── @codemirror/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b080f1a0f1e3b4d554a554a" rel="noreferrer noopener nofollow">[email protected]</a>
最佳答案
已解决。只需将 "@codemirror/state": "^6.1.1" 版本降级为 "@codemirror/state": "^0.19.0" 即可。
关于javascript - 代码镜像错误: Uncaught Error: Unrecognized extension value in extension set ([object Object])，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73643024/