将 monaco 编辑器与 next js 一起使用时出现此错误。有没有人解决过这个问题？
Failed to compile
./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.js```
添加此 webpack 配置为我修复了它
const withCSS = require('@zeit/next-css');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = withCSS({
webpack(config, options) {
config.plugins.push(new MonacoWebpackPlugin());
return config;
},
cssLoaderOptions: { url: false }
})
@monaco-editor/react 第三方帮手
我不确定它为什么会起作用，我宁愿避免第三方的东西，但这是我开始工作的第一件事，他们只是把它打包得很好，所以这里是：
你可以MonacoWebpackPlugin在使用时摆脱它。
我测试的关键依赖项：
"dependencies": {
"@monaco-editor/react": "4.2.1",
"next": "11.0.1",
"monaco-editor": "0.26.1",
然后用法如自述文件中所述。它们公开了一个Editor组件助手，但monaco如果需要，您也可以获得一个实例。
有关的：