与monaco-editor-webpack-plugin冲突 #4034

Alt-er · 2019-04-19T03:02:30Z

$ 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 · 2019-05-17T03:46:25Z

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

ISBN9527 · 2019-05-20T06:44:36Z

这是不是一个bug啊？请问

Alt-er · 2019-05-20T06:53:13Z

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

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

ISBN9527 · 2019-05-20T06:57:54Z

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

afc163 · 2019-05-20T09:58:41Z

umi 可能需要升级一下依赖 css-modules/postcss-modules-scope#1

ref #4229

@sorrycc

sorrycc · 2019-05-22T04:24:46Z

在 umijs/umi#2236 跟进。

afc163 · 2019-06-25T06:42:41Z

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

linonetwo · 2019-09-05T08:29:40Z

这个可以在 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 · 2019-09-09T07:25:01Z

@linonetwo microsoft/monaco-editor#1574
这个是 monaco-editor 0.18.0 版本的问题，暂时用 0.17.0 吧

afc163 mentioned this issue May 20, 2019

如何升级css-loader？ #4229

Closed

ISBN9527 mentioned this issue May 21, 2019

如果CSS模块遇到冲突，在哪里单独配置css-loader? #4211

Closed

ant-design-bot added the Inactive label Jun 22, 2019

chenshuai2144 closed this as completed Jun 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

与monaco-editor-webpack-plugin冲突 #4034

与monaco-editor-webpack-plugin冲突 #4034

Alt-er commented Apr 19, 2019 •

edited by xiaohuoni

ISBN9527 commented May 17, 2019

ISBN9527 commented May 20, 2019

Alt-er commented May 20, 2019

ISBN9527 commented May 20, 2019

afc163 commented May 20, 2019 •

edited

sorrycc commented May 22, 2019

afc163 commented Jun 25, 2019

linonetwo commented Sep 5, 2019

hhking commented Sep 9, 2019

与monaco-editor-webpack-plugin冲突 #4034

与monaco-editor-webpack-plugin冲突 #4034

Comments

Alt-er commented Apr 19, 2019 • edited by xiaohuoni

ISBN9527 commented May 17, 2019

ISBN9527 commented May 20, 2019

Alt-er commented May 20, 2019

ISBN9527 commented May 20, 2019

afc163 commented May 20, 2019 • edited

sorrycc commented May 22, 2019

afc163 commented Jun 25, 2019

linonetwo commented Sep 5, 2019

hhking commented Sep 9, 2019

Alt-er commented Apr 19, 2019 •

edited by xiaohuoni

afc163 commented May 20, 2019 •

edited