SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

我正在开发一个电子应用程序,在前端使用 React,我正在尝试使用 Jest 进行测试。但是,当我尝试 运行 测试时,出现以下错误:

SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: 当前未启用对实验语法 'decorators-legacy' 的支持 (1:1):

> 1 | @import "../../fonts/fonts.css";
    | ^
  2 |
  3 | :root {
  4 |     --cyborgBlue: #65c8cc;

  at Parser._raise (node_modules/@babel/parser/src/parser/error.js:147:45)
  at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:142:17)
  at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:198:18)
  at Parser.parseDecorator (node_modules/@babel/parser/src/parser/statement.js:424:10)
  at Parser.parseDecorators (node_modules/@babel/parser/src/parser/statement.js:403:30)
  at Parser.parseStatement (node_modules/@babel/parser/src/parser/statement.js:228:12)
  at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/src/parser/statement.js:966:25)
  at Parser.parseBlockBody (node_modules/@babel/parser/src/parser/statement.js:942:10)
  at Parser.parseProgram (node_modules/@babel/parser/src/parser/statement.js:117:10)
  at Parser.parseTopLevel (node_modules/@babel/parser/src/parser/statement.js:102:25)

我意识到这个问题之前已经被问过很多次,但最常见的解决方案是在我的 . babelrc 文件。不幸的是,这并没有解决问题。

这是我的 package.json 文件:

  "name": "cyborg_cloud_explorer",
  "version": "0.2.7",
  "homepage": "./",
  "author": "Cyborg Inc.",
  "description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
  "main": "public/electron.js",
  "scripts": {
    "start": "electron .",
    "prestart": "npm run build",
    "pack": "electron-builder --dir",
    "dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
    "start-browser": "react-scripts start",
    "eject": "react-scripts eject",
    "ebuild": "npm run build && /node_modules/.bin/build",
    "build": "react-scripts build",
    "dist": "electron-builder",
    "test": "jest __tests__/ --coverage",
    "marge": "marge report.json",
    "electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build --em.main=build/electron.js",
    "preelectron-pack": "npm run build"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "aws4": "^1.11.0",
    "axios": "^0.21.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "base32": "0.0.6",
    "convert-csv-to-json": "^1.3.1",
    "convert-excel-to-json": "^1.7.0",
    "dotenv": "^10.0.0",
    "ffi-napi": "^3.0.1",
    "franc-min": "^5.0.0",
    "hyperquest": "^2.1.3",
    "jssha": "^3.2.0",
    "keytar": "^6.0.1",
    "mammoth": "^1.4.17",
    "mochawesome-report-generator": "^5.1.0",
    "ndjson": "^2.0.0",
    "nibbler": "^0.2.0",
    "node-addon-api": "^3.1.0",
    "node-html-parser": "^3.3.6",
    "node-machine-id": "^1.1.12",
    "node-tika": "0.0.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-file-icon": "^1.0.0",
    "react-hotkeys-hook": "^3.4.0",
    "react-scripts": "^4.0.3",
    "ref-napi": "^2.1.2",
    "ref-struct-napi": "^1.1.1",
    "version": "^0.1.2",
    "xml2js": "^0.4.23"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/plugin-transform-object-assign": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "concurrently": "^6.0.2",
    "dotenv": "^10.0.0",
    "electron": "^9.4.3",
    "electron-builder": "^22.9.1",
    "electron-builder-squirrel-windows": "^22.10.4",
    "electron-chromedriver": "^11.0.0",
    "eslint": "^7.17.0",
    "jest": "^26.6.0",
    "mocha": "^8.2.1",
    "mochawesome": "^6.2.1",
    "node-key-sender": "^1.0.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "selenium-webdriver": "^4.0.0-beta.1",
    "spectron": "^11.1.0",
    "spectron-keys": "0.0.1",
    "wait-on": "^5.3.0"
  },
  "build": {
    "productName": "Cyborg Cloud Explorer",
    "artifactName": "CloudExplorer",
    "compression": "normal",
    "forceCodeSigning": false,
    "copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
    "asarUnpack": [
      "assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
    ],
    "extraResources": [
      "assets/vs_redist/*"
    ],
    "files": [
      "src/assets/fonts/**/*",
      "src/assets/media",
      "src/assets/dictionaries",
      "src/assets/cyborg_cloud_engine",
      "src/pages/**/*",
      "src/*",
      "build/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "target": "squirrel",
      "icon": "src/assets/media/cyborg.ico"
    },
    "linux": {
      "target": "AppImage",
      "icon": "./assets/media/256x256.png",
      "executableName": "CloudExplorer",
      "category": "Network",
      "appId": "Cyborg.Cloud.Explorer"
    },
    "mac": {
      "target": "dmg",
      "icon": "./assets/media/cyborg.icns",
      "appId": "com.cloud.explorer",
      "category": "public.app-category.business"
    },
    "squirrelWindows": {
      "iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
      "loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

还有我的 .babelrc 文件:

    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}```

Jest 不会使用开箱即用的 babel 插件,您需要安装一些额外的包。

配纱:

yarn add --dev babel-jest babel-core regenerator-runtime

使用 npm:

npm install babel-jest babel-core regenerator-runtime --save-dev

Jest 然后应该从您的 .babelrcbabel.config.js 中获取配置。

来源:https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel

我想我已经找到问题所在。当我将 .babelrc 文件的名称更改为 babel.config.json 时。我没有再收到那个错误了。

根据 Babel 的文档,.babelrc 文件是文件相关的,而 babel.config.json 文件是项目范围的。

您可以在此处阅读更多相关信息:https://babeljs.io/docs/en/config-files