Question

在下一个js中使用monaco编辑器时出现此错误。有人解决了吗？

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 第三方帮手

我不确定它为什么有效，我宁愿避免第三方的东西，但这是我开始工作的第一件事，他们只是把它打包得很好，所以这里是：

你可以在使用它时去掉 MonacoWebpackPlugin。

我测试的关键依赖项：

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

然后用法如自述文件中所述。它们公开了一个 Editor 组件助手，但您也可以根据需要获得一个 monaco 实例。

带有nextjs的摩纳哥编辑器

2 个答案: