带有nextjs的摩纳哥编辑器

Question

在下一个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```

Answer 1

加上这个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 }
})

Answer 2

@monaco-editor/react 第三方助手

我不知道它为什么会起作用，我宁愿避免第三方的东西，但这是我要做的第一件事，他们只是把它包装得很好，所以这就是：

• https://www.npmjs.com/package/@monaco-editor/react
• https://github.com/suren-atoyan/monaco-react

您可以在使用它时摆脱MonacoWebpackPlugin。

我用以下方法测试了密钥依赖：

  "dependencies": {
    "@monaco-editor/react": "4.2.1",
    "next": "11.0.1",
    "monaco-editor": "0.26.1",

然后，用法就像自述的那样。它们公开了一个Editor组件助手，但如果需要，您也可以获得一个monaco实例。

相关信息：

• https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3
• https://github.com/react-monaco-editor/react-monaco-editor/issues/271
• https://github.com/resourcesco/snippets/blob/master/docs/monaco-editor-with-next.md
• https://github.com/react-monaco-editor/react-monaco-editor/issues/334
• https://github.com/ritz078/transform/issues/282