问题
Module parse failed: Unexpected token (30:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js/concepts#loaders
| // src/language/json/monaco.contribution.ts
| var LanguageServiceDefaultsImpl = class {
> _onDidChange = new monaco_editor_core_exports.Emitter();
分析:需要编译可以翻译class 的loader。引入@babel/plugin-proposal-class-properties
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
// config.ts中
chainWebpack(memo, { webpack }) {
const Config = require('webpack-chain');
const config = new Config();
config.module
.rule('compile')
.test('/\.(js|jsx)$/')
.use('babel')
.loader('babel-loader')
.options({
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties"],
})
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
languages: ['json', 'javascript']
}
])
module.exports = config.toConfig();
},
<MonacoEditor
width="800"
height="600"
language="mysql"
theme="vs-light"
value={code}
options={{
selectOnLineNumbers: true
}}
onChange={onMonacoChange}
// editorDidMount={this.editorDidMount}
/>
更多推荐
umi(react)项目中引入monaco-editor
发布评论