1.package.json配置
{
"name": "test_0927",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.3.1",
"react-ace": "^10.1.0",
"ace-builds": "^1.11.2",
"antd": "^4.23.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.24.0",
"eslint-config-next": "12.3.1"
}
}
2.index.js
import dynamic from 'next/dynamic'
const AceEditor = dynamic(()=> import("react-ace"),{ssr:false})
// const java = dynamic(() => import("ace-builds/src-noconflict/mode-java"),{ssr:false})
// const github = dynamic(() => import("ace-builds/src-noconflict/theme-github"),{ssr:false})
export default function Home() {
return (
<AceEditor
mode="java"
theme="github"
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>
)
}
报错界面;关键字没有高亮;mode-java.js mode-github.js两个js文件获取不到