SyntaxError Support for the experimental syntax 'optionalChainingAssign' isn't currently enabled?

Question

SyntaxError Support for the experimental syntax 'optionalChainingAssign' isn't currently enabled?

webapck 启动报错 SyntaxError: Support for the experimental syntax 'optionalChainingAssign' isn't currently enabled (103:13): 已经引入了@babel/plugin-proposal-optional-chaining 还是报错，这种怎么修改？

报错代码 common.js 在主入口文件中引入了

function scrollToCompatibleIE(element, top, left) {
    if (element && top && left) {
        if (typeof element.scrollTo !== 'function') {
            element?.scrollTop = top;  // 这里报错
            element?.scrollLeft = left; // 这里报错
        } else {
            element?.scrollTo({
                top: top,
                left: left,
            });
        }
    }

}

.babelrc 配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "ie >=9",
            "chrome >= 48",
            "android >= 4.4",
            "ios >= 9",
            "safari >= 7"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining", 
    "@babel/plugin-transform-runtime"
  ]
}

webapck.config.js 配置

   rules: [
      {
        test: /\.m?js$/, // 匹配 .js 或 .mjs 文件
        exclude: /node_modules/, 
        use: {
          loader: "babel-loader",
          options: {
            configFile: path.resolve(__dirname, '.babelrc') // 指定Babel配置文件
          }
        },
      },

package.json 配置

{
  "scripts": {
    "start:test": "npx cross-env envMode=test webpack serve --open --mode development"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-transform-runtime": "^7.24.3",
    "@babel/preset-env": "^7.24.4",
    "@vue/compiler-sfc": "^3.4.25",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.1",
    "dotenv": "^16.4.5",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.0.0",
    "imagemin": "^8.0.1",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "postcss-px-to-viewport": "^1.1.1",
    "sass": "^1.75.0",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "vue-loader": "^17.3.1",
    "webpack": "^5.91.0",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.37.0",
    "default-passive-events": "^2.0.0",
    "jquery": "^3.7.1",
    "regenerator-runtime": "^0.14.1",
    "vconsole": "^3.15.1",
    "vue": "^3.4.25",
    "weixin-js-sdk": "^1.6.5"
  }
}

webpack babel javascript

阅读 1.1k

AI BotBETA

报错信息提示的是不支持实验性的语法 'optionalChainingAssign'，即使你已经添加了 @babel/plugin-proposal-optional-chaining 插件。实际上，optionalChainingAssign 并不是一个 Babel 官方支持的插件选项。Babel 插件 @babel/plugin-proposal-optional-chaining 是用来支持可选链（Optional Chaining）语法的，而不是可选链赋值（Optional Chaining Assignment）。

在你的代码中：

element?.scrollTop = top;  // 这里报错
element?.scrollLeft = left; // 这里报错

这里你尝试使用可选链语法进行属性赋值，但这不是可选链的标准用法。可选链主要用于安全地访问深层嵌套的属性，而不是用于赋值。如果你想在赋值时实现类似可选链的功能，你应该使用逻辑与（Logical AND）操作符 (&&) 或者其他条件判断。

举个例子，将上面的代码修改为：

if (element) {
    element.scrollTop = top;
    element.scrollLeft = left;
}

或者，如果你希望使用类似可选链的语法来避免 element 为 null 或 undefined 时抛出错误，可以这样写：

element && (element.scrollTop = top);
element && (element.scrollLeft = left);

此外，你的 .babelrc 配置中不需要包含 @babel/plugin-transform-runtime 插件，除非你需要使用 Babel 的运行时帮助函数（例如 _classCallCheck 等），这通常在你使用某些 Babel 插件（比如 @babel/plugin-proposal-class-properties）时会需要。

因此，请按照上述方式修改你的代码，并移除 .babelrc 中不必要的插件配置。如果仍然遇到问题，请确保你的 Babel 和相关插件的版本是最新的，并且与你的 Webpack 配置兼容。有时候，问题可能也出现在项目依赖未正确安装或缓存导致的，尝试删除 node_modules 文件夹和 package-lock.json 或 yarn.lock 文件，然后重新运行 npm install 或 yarn 来安装依赖。

1 个回答

发布于
5 月 13 日上海

Babel 插件 @babel/plugin-proposal-optional-chaining是用来支持可选链（Optional Chaining）语法的，而不是可选链赋值（Optional Chaining Assignment）

撰写回答