您可能需要一个额外的加载程序来处理这些加载程序的结果(升级摩纳哥编辑器)
我想升级摩纳哥编辑器的版本到0.31.1。我做了npm install monaco-editor@0.31.1，sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-app-rewired start的重新编译给了我以下错误：
Failed to compile.
./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11
Module parse failed: Unexpected token (154:11)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| dispose() {
| onLanguageListener.dispose();
> mode?.dispose();
| mode = void 0;
| }有人能帮忙吗？
编辑1:升级前的 package.json：
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fluentui/react": "^8.33.0",
"@handsontable/react": "^9.0.2",
"@material-ui/core": "^4.9.8",
"@microsoft/office-js-helpers": "^1.0.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/react-stripe-elements": "^6.0.4",
"@uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"copy-to-clipboard": "^3.3.1",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"handsontable": "^9.0.2",
"highcharts": "^7.0.3",
"highcharts-react-official": "^3.0.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.20.0",
"monaco-languageclient": "^0.13.0",
"node-sass": "^4.14.1",
"office-ui-fabric-core": "^11.0.0",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-meta-tags": "^1.0.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "PORT=3000 react-app-rewired start",
"start:https": "HTTPS=true react-app-rewired start",
"build": "react-scripts --max_old_space_size=8096 build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/color": "^3.0.1",
"@types/cross-storage": "^0.8.29",
"@types/jest": "^25.1.4",
"@types/lodash": "^4.14.149",
"@types/node": "^13.9.5",
"@types/office-js": "^1.0.92",
"@types/query-string": "^6.3.0",
"@types/react": "^16.9.27",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.7",
"@types/styled-components": "^5.0.1",
"@types/yup": "^0.26.33",
"css-loader": "^3.5.3",
"react-app-rewired": "^2.1.8",
"style-loader": "^1.2.1"
}
}当"monaco-editor": "^0.20.0"时，npm list monaco-editor返回
$ npm list monaco-editor
npm list monaco-editor
frontend@0.1.0 /frontend
├── UNMET DEPENDENCY monaco-editor@0.20.0
└─┬ UNMET DEPENDENCY react-monaco-editor@0.35.0
└── UNMET DEPENDENCY monaco-editor@0.20.0
npm ERR! missing: monaco-editor@0.20.0, required by frontend@0.1.0
npm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0
npm ERR! missing: monaco-editor@0.20.0, required by react-monaco-editor@0.35.0当"monaco-editor": "^0.31.1"时，npm list monaco-editor返回
$ npm list monaco-editor
frontend@0.1.0 /frontend
├── UNMET DEPENDENCY monaco-editor@0.31.1
└─┬ UNMET DEPENDENCY react-monaco-editor@0.35.0
└── UNMET DEPENDENCY monaco-editor@0.31.1
npm ERR! missing: monaco-editor@0.31.1, required by frontend@0.1.0
npm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0
npm ERR! missing: monaco-editor@0.31.1, required by react-monaco-editor@0.35.0编辑2:
按照@Bart的程序，我通过yarn add @babel/preset-env --dev安装了yarn add @babel/preset-env --dev，并使用{"presets": ["@babel/preset-env"]}创建了babel.config.json，但是react-app-rewired start也给出了同样的错误。
然后，我意识到我确实有一个文件config-overrides.js，内容如下：
module.exports = function override (config, env) {
// disable chunks so the index.html won't change during development
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.optimization.runtimeChunk = false;
return config;
}然后我为config.module.rules添加了部分，但是编译返回了相同的错误。
另外，似乎可以使用yarn build 构建项目，而不会出现此错误。但是，构建项目需要时间。
module.exports = function override (config, env) {
config.module.rules =
[
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
// disable chunks so the index.html won't change during development
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.optimization.runtimeChunk = false;
return config;
}回答 4
Stack Overflow用户
发布于 2022-01-07 14:51:17
问题似乎在于可选的链接语法( ?. in mode?.dispose();)。这也被列为摩纳哥变化量g的重大变化：
生成的代码现在与ESBuild捆绑在一起，生成的代码使用更新的浏览器特性，例如可选链接。这些特性应该可以在所有浏览器中使用，但是旧的JS解析器可能无法正确地解析它们，特别是parsing v1可能会出现解析JS的问题。
正确的Babel插件可以很好地处理这个语法。一般来说，最好使用@babel/preset-env而不是单独的插件。这个预设会同时处理多个插件。您是否有一个babel配置文件，其中可以包括此预设？这可以简单到将@babel/preset-env安装为一个dev依赖项，并在项目根目录中创建一个具有以下内容的babel.config.json文件：
{
"presets": ["@babel/preset-env"]
}其次，这可能意味着您的Babel配置已经正常工作，但是node_modules内部的任何内容都被Webpack忽略了(通过Create在引擎盖下使用)，这通常是为了加快传输溢出时间。然后，您必须找到一种方法来推翻Webpack配置，这样您的monaco依赖项就不会被跳过以进行转移溢出。
我知道您已经在使用react-app-rewired了，所以更新Webpack配置就像在他们的文件中解释的那样
// config-overrides.js
module.exports = function override (config, env) {
// disable chunks so the index.html won't change during development
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.optimization.runtimeChunk = false;
config.module.rules = [
{
test: /node_modules\/monaco-editor/,
use: {
loader: 'babel-loader',
// if you include your babel config here,
// you don’t need the `babel.config.json` file
options: { presets: ['@babel/preset-env'] }
}
},
...config.module.rules
]
return config;
}集成Babel可以通过babel-loader完成，参见说明这里。
Stack Overflow用户
发布于 2022-01-08 11:21:31
在我的Vue项目中，我和你有同样的问题。
也许你可以这样处理：
从GitHub下载摩纳哥的源代码-编辑器
修改文件buildESM中的函数buildOneAMD和函数monaco-editor/build/utils.js
将target设置为es2015
function buildESM(options) {
build({
entryPoints: options.entryPoints,
bundle: true,
target: 'es2015',
format: 'esm',
define: {
AMD: 'false'
},
banner: {
js: bundledFileHeader
},
external: options.external,
outbase: `src/${options.base}`,
outdir: `out/release/${options.base}/esm/`,
plugins: [
alias({
'vscode-nls': path.join(__dirname, 'fillers/vscode-nls.ts')
})
]
});
}然后，npm run release和等待直到它完成
npm run release获取文件夹monaco-editor/release，复制文件夹release的内容并粘贴到您在项目下创建的文件夹modules/monaco-editor中。
在您的项目中，修改package.json，将monaco-editor设置为file:modules/monaco-editor和npm install
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"monaco-editor": "file:modules/monaco-editor",
}
}npm install这是我解决上述问题的方法，如果有人找到更好的解决办法，请在此回复我。
对不起，我的英语很差。
Stack Overflow用户
发布于 2022-02-14 18:56:26
我的项目也有同样的问题。有一个摩纳哥编辑webpack插件，处理这些加载程序的问题。但最新版本也存在一些问题。所以我安装了monaco-editor-webpack-plugin@6.0.0和monaco-editor@0.30.1。那你只需要把插件添加到webpack身上。
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
// ...
plugins: [
new MonacoWebpackPlugin(),
],
};https://stackoverflow.com/questions/70538511
复制相似问题
腾讯云开发者
