Ant-design-pro: 与monaco-editor-webpack-plugin冲突

[Alt-er]

$ npm install monaco-editor-webpack-plugin
$ npm install react-monaco-editor

//plugin.config.js

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
...
config.plugin('monaco-editor').use( MonacoWebpackPlugin , [
      {
        languages: ['javascript','typescript']
      }
    ])

经测试与2.3.0和2.3.1冲突,错误信息:

 **ERROR  Failed to compile with 2 errors                                                                         11:01:06

 error  in ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOutline.css

Module build failed (from ./node_modules/af-webpack/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/af-webpack/node_modules/css-loader/index.js):
TypeError: exports[name].indexOf is not a function
    at exportScopedName (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:50:25)
    at localizeNode (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:64:28)
    at Array.map (<anonymous>)
    at localizeNode (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:60:38)
    at traverseNode (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:78:20)
    at Array.map (<anonymous>)
    at traverseNode (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:84:38)
    at Array.map (<anonymous>)
    at traverseNode (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:84:38)
    at G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:103:25
    at callback (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\node_modules\postcss\lib\container.es6:198:28)
    at callback (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\node_modules\postcss\lib\container.es6:109:26)
    at Root.callback [as each] (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\node_modules\postcss\lib\container.es6:77:22)
    at Root.each (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\node_modules\postcss\lib\container.es6:108:21)
    at Root.walk [as walkRules] (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\node_modules\postcss\lib\container.es6:196:25)
    at G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\postcss-modules-scope\lib\index.js:101:9
    at runLoaders (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\webpack\lib\NormalModule.js:301:20)
    at G:\产品相关\cosy-antd-pro\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at G:\产品相关\cosy-antd-pro\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (G:\产品相关\cosy-antd-pro\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\lib\loader.js:44:18)
    at G:\产品相关\cosy-antd-pro\node_modules\af-webpack\node_modules\css-loader\lib\processCss.js:216:4

 @ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOutline.js 18:0-28
 @ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js
 @ ./src/components/Cosy/ScriptEditer.js
 @ ./src/pages/Cosy/Scripts.js
 @ ./src/pages/.umi/router.js
 @ ./src/pages/.umi/umi.js
 @ multi ./node_modules/af-webpack/lib/webpackHotDevClient.js ./src/pages/.umi/umi.js

 error  in ./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/media/suggest.css

 @ ./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/suggestWidget.js 25:0-29
 @ ./node_modules/monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js
 @ include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js
 @ ./src/components/Cosy/ScriptEditer.js
 @ ./src/pages/Cosy/Scripts.js
 @ ./src/pages/.umi/router.js
 @ ./src/pages/.umi/umi.js
 @ multi ./node_modules/af-webpack/lib/webpackHotDevClient.js ./src/pages/.umi/umi.js**

通过 umi create 命令创建antdpro不会出现该错误，该命令创建pro的版本

"name": "ant-design-pro",
 "version": "2.1.1",
 "description": "An out-of-box UI solution for enterprise applications",

[ISBN9527]

请问问题解决了吗？我也有同样的问题
@Alt-er

[ISBN9527]

这是不是一个bug啊？请问

[Alt-er]

@wangchong19940101
已经解决了 ，但是不是很完美 。原因是css-loader 有冲突，可能是版本太低的原因。
解决方法：
node_modules\postcss-modules-scope\lib\index.js 第45行

var exports = {}; 修改为var exports = Object.create(null);

[ISBN9527]

如果线上CI构建，拉取包的时候会报错吗？

[afc163]

umi 可能需要升级一下依赖 https://github.com/css-modules/postcss-modules-scope/pull/1

ref https://github.com/ant-design/ant-design-pro/issues/4229

@sorrycc

[sorrycc]

在 https://github.com/umijs/umi/issues/2236 跟进。

[afc163]

可以升级到 umi 2.8.0 以上，然配置上 cssLoaderVersion: 2。

[linonetwo]

这个可以在 config/config.ts 里面：

export default {
  cssLoaderVersion: 2,
  ...

来解决。

此外还需要配置 webpack：

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

@ -25,6 +26,12 @@ function getModulePackageName(module: { context: string }) {
}

export default (config: any) => {
  config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
    {
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['json', 'python']
    }
  ]);

然后要安装 npm i monaco-editor monaco-editor-webpack-plugin react-monaco-editor umi@next

使用则是

import MonacoEditor from 'react-monaco-editor';

<MonacoEditor
        width="800"
        height="600"
        language="python"
        theme="vs-dark"
        value={'xxx'}
        options={{
          selectOnLineNumbers: true,
        }}
        onChange={newCode => setExtractorCode(newCode)}
        editorDidMount={editor => editor.focus()}
      />

但是 start 是可以 start， 启动后进入有 monaco editor 的页面还是会说：

Unhandled Rejection (ReferenceError): __insane_exports is not defined
push../node_modules/monaco-editor/esm/vs/base/common/insane/insane.js.4../defaults
node_modules/monaco-editor/esm/vs/base/common/insane/insane.js:95
  92 | 
  93 |  insane.defaults = defaults;
  94 |  module.exports = insane;
> 95 |  __insane_exports = insane;
     | ^  96 | 
  97 | }, { "./defaults": 2, "./parser": 7, "./sanitizer": 8, "assignment": 6, "he": 9 }], 5: [function (require, module, exports) {
  98 |  'use strict';

[hhking]

@linonetwo https://github.com/microsoft/monaco-editor/issues/1574
这个是 monaco-editor 0.18.0 版本的问题，暂时用 0.17.0 吧