Sof*_*mur 11 webpack babeljs monaco-editor babel-loader react-app-rewired
我想将 Monaco Editor 版本升级到 v0.31.1。我这样做了npm install monaco-editor@0.31.1，重新编译sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-app-rewired start给了我以下错误：
Failed to compile.\n\n./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11\nModule parse failed: Unexpected token (154:11)\nFile was processed with these loaders:\n * ./node_modules/babel-loader/lib/index.js\nYou may need an additional loader to handle the result of these loaders.\n| dispose() {\n| onLanguageListener.dispose();\n> mode?.dispose();\n| mode = void 0;\n| }\n有人可以帮忙吗？
\n编辑1：package.json升级前\n ：
Failed to compile.\n\n./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11\nModule parse failed: Unexpected token (154:11)\nFile was processed with these loaders:\n * ./node_modules/babel-loader/lib/index.js\nYou may need an additional loader to handle the result of these loaders.\n| dispose() {\n| onLanguageListener.dispose();\n> mode?.dispose();\n| mode = void 0;\n| }\n当 时"monaco-editor": "^0.20.0"，npm list monaco-editor返回
$ npm list monaco-editor\nnpm list monaco-editor\nfrontend@0.1.0 /frontend\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.20.0 \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\xac UNMET DEPENDENCY react-monaco-editor@0.35.0\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.20.0 \n\nnpm ERR! missing: monaco-editor@0.20.0, required by frontend@0.1.0\nnpm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0\nnpm ERR! missing: monaco-editor@0.20.0, required by react-monaco-editor@0.35.0\n当 时"monaco-editor": "^0.31.1"，npm list monaco-editor返回
$ npm list monaco-editor\nfrontend@0.1.0 /frontend\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.31.1 \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\xac UNMET DEPENDENCY react-monaco-editor@0.35.0\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.31.1 \n\nnpm ERR! missing: monaco-editor@0.31.1, required by frontend@0.1.0\nnpm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0\nnpm ERR! missing: monaco-editor@0.31.1, required by react-monaco-editor@0.35.0\n编辑2：
\n按照@Bart的anwser，我安装@babel/preset-env并使用yarn add @babel/preset-env --dev创建，但给出了相同的错误。babel.config.json{"presets": ["@babel/preset-env"]}react-app-rewired start
然后我发现我确实有一个文件config-overrides.js，内容如下：
{\n "name": "frontend",\n "version": "0.1.0",\n "private": true,\n "dependencies": {\n "@fluentui/react": "^8.33.0",\n "@handsontable/react": "^9.0.2",\n "@material-ui/core": "^4.9.8",\n "@microsoft/office-js-helpers": "^1.0.2",\n "@testing-library/jest-dom": "^4.2.4",\n "@testing-library/react": "^9.3.2",\n "@testing-library/user-event": "^7.1.2",\n "@types/react-stripe-elements": "^6.0.4",\n "@uifabric/react-cards": "^0.109.49",\n "axios": "^0.19.2",\n "color": "^3.1.2",\n "copy-to-clipboard": "^3.3.1",\n "cross-storage": "^1.0.0",\n "dva": "^2.4.1",\n "dva-model-creator": "^0.4.3",\n "formik": "^2.1.4",\n "handsontable": "^9.0.2",\n "highcharts": "^7.0.3",\n "highcharts-react-official": "^3.0.0",\n "lodash": "^4.17.15",\n "moment": "^2.24.0",\n "monaco-editor": "^0.20.0",\n "monaco-languageclient": "^0.13.0",\n "node-sass": "^4.14.1",\n "office-ui-fabric-core": "^11.0.0",\n "office-ui-fabric-react": "^7.105.4",\n "query-string": "^6.11.1",\n "react": "^16.13.1",\n "react-app-polyfill": "^1.0.6",\n "react-bootstrap": "^1.0.1",\n "react-dom": "^16.13.1",\n "react-meta-tags": "^1.0.1",\n "react-monaco-editor": "^0.35.0",\n "react-scripts": "3.4.1",\n "react-stripe-elements": "^6.1.1",\n "redux-devtools-extension": "^2.13.8",\n "styled-components": "^5.0.1",\n "typescript": "^3.8.3",\n "yup": "^0.28.3"\n },\n "scripts": {\n "start": "PORT=3000 react-app-rewired start",\n "start:https": "HTTPS=true react-app-rewired start",\n "build": "react-scripts --max_old_space_size=8096 build",\n "test": "react-scripts test",\n "eject": "react-scripts eject"\n },\n "eslintConfig": {\n "extends": "react-app"\n },\n "browserslist": {\n "production": [\n ">0.2%",\n "not dead",\n "not op_mini all"\n ],\n "development": [\n "last 1 chrome version",\n "last 1 firefox version",\n "last 1 safari version"\n ]\n },\n "devDependencies": {\n "@types/color": "^3.0.1",\n "@types/cross-storage": "^0.8.29",\n "@types/jest": "^25.1.4",\n "@types/lodash": "^4.14.149",\n "@types/node": "^13.9.5",\n "@types/office-js": "^1.0.92",\n "@types/query-string": "^6.3.0",\n "@types/react": "^16.9.27",\n "@types/react-dom": "^16.9.5",\n "@types/react-redux": "^7.1.7",\n "@types/styled-components": "^5.0.1",\n "@types/yup": "^0.26.33",\n "css-loader": "^3.5.3",\n "react-app-rewired": "^2.1.8",\n "style-loader": "^1.2.1"\n }\n}\n然后我添加了 的部分config.module.rules，但编译返回了相同的错误。
此外，似乎可以在yarn build没有此错误的情况下构建该项目。但建设该项目需要时间。
$ npm list monaco-editor\nnpm list monaco-editor\nfrontend@0.1.0 /frontend\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.20.0 \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\xac UNMET DEPENDENCY react-monaco-editor@0.35.0\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 UNMET DEPENDENCY monaco-editor@0.20.0 \n\nnpm ERR! missing: monaco-editor@0.20.0, required by frontend@0.1.0\nnpm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0\nnpm ERR! missing: monaco-editor@0.20.0, required by react-monaco-editor@0.35.0\nBar*_*art 11
问题似乎出在可选链接语法（?.in mode?.dispose();）上。这也被列为摩纳哥变更日志中的重大更改：
\n\n生成的代码现在与 ESBuild 捆绑在一起，并且生成的代码利用了较新的浏览器功能，例如可选链接。这些功能应该在所有浏览器中可用，但较旧的 JS 解析器可能无法正确解析它们，特别是 Parcel v1 可能在解析 JS 时出现问题。
\n
这个语法可以通过正确的 Babel 插件很好地处理。一般来说，使用\xe2\x80\x99@babel/preset-env比单独的插件更好。这个预设可以同时处理多个插件。你有一个 babel 配置文件可以包含这个预设吗？这可以像安装@babel/preset-env为开发依赖项一样简单，并babel.config.json在项目根目录中创建一个包含以下内容的文件：
{\n "presets": ["@babel/preset-env"]\n}\n其次，这可能意味着您的 Babel 配置已经正常工作，但是node_modulesWebpack 会忽略内部的任何内容（由 Create React App 在后台使用），这通常是为了加快转译时间。然后你\xe2\x80\x99ll必须找到一种方法来否决Webpack配置，以便你的monaco依赖项不会被跳过进行转译。
我看到你\xe2\x80\x99已经在使用react-app-rewired，所以更新Webpack配置是按照他们的文档中的解释完成的：
// config-overrides.js\nmodule.exports = function override (config, env) { \n // disable chunks so the index.html won\'t change during development \n config.optimization.splitChunks = {\n cacheGroups: {\n default: false,\n },\n };\n config.optimization.runtimeChunk = false;\n \n config.module.rules = [\n {\n test: /node_modules\\/monaco-editor/,\n use: {\n loader: \'babel-loader\',\n // if you include your babel config here,\n // you don\xe2\x80\x99t need the `babel.config.json` file\n options: { presets: [\'@babel/preset-env\'] }\n }\n },\n ...config.module.rules\n ]\n return config;\n}\n集成 Babel 可以通过 完成，请参阅此处的babel-loader说明。
| 归档时间： |
|
| 查看次数： |
21533 次 |
| 最近记录： |