导入带有可选链接的模块时出错

Posted 2023-02-22

【中文标题】导入带有可选链接的模块时出错

【英文标题】：Error while importing a module with optional chaining

【发布时间】：2021-09-02 02:23:09

【问题描述】：

项目设置：

Vuejs 3 Webpack 4 通天塔 TS

我们使用vue-cli 创建了项目并将依赖项添加到库中。

然后我们导入了一个使用可选链接的项目 (Vue Currency Input v2.0.0)。但是我们在执行serve 脚本时遇到了如下错误：

error  in ./node_modules/vue-currency-input/dist/index.esm.js

Module parse failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     getMinValue() 
|         let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
>         if (this.options.valueRange?.min !== undefined) 
|             min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
|         

我读到 Webpack 4 默认不支持可选链接。因此，我们为可选链添加了 Babel 插件。这是我们的babel.config.js 文件：

module.exports = 
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: ["@babel/plugin-proposal-optional-chaining"],
;

(但是，如果我没记错的话，这个插件现在在babel-preset中默认启用。所以这个修改可能没用^^)

我不明白的一件事是我们可以在.vue 文件中使用可选链接。

我创建了一个包含所有文件的沙盒：SandBox

我该如何解决这个错误？

【问题讨论】：

***.com/questions/52615179/… 可能重复。

【参考方案1】：

我可以使用@babel/plugin-proposal-optional-chaining 解决这个问题，但对我来说，让 Webpack 使用 Babel 插件的唯一方法是通过 vue.config 中的 Webpack 选项推送 babel-loader 配置。 js。这是一个最小的 vue.config.js：

const path = require('path');
module.exports = 
  chainWebpack: config => 
    config.module
      .rule('supportChaining')
      .test(/\.js$/)
        .include
          .add(path.resolve('node_modules/PROBLEM_MODULE'))
          .end()
      .use('babel-loader')
        .loader('babel-loader')
        .tap(options => ( ...options, 
          plugins : ['@babel/plugin-proposal-optional-chaining']
        ))
        .end()
    
;

令人惊讶的是，我确实不需要需要使用 NPM 安装 @babel/plugin-proposal-optional-chaining。我对一个使用 @vue/cli 4.5.13 搭建的应用程序进行了 go/no-go 测试，在我的情况下没有打字稿。我导入了导致我悲伤的 NPM 模块（@vime/vue-next 5.0.31 BTW），运行serve 脚本并在包含可选链接的行上得到Unexpected token 错误。然后我将上述 vue.config.js 插入项目根目录并再次运行 serve 脚​​本，这次没有错误。

我的观点是，似乎可以在不严重污染开发环境的情况下解决这个问题。

Vue 论坛否认这个问题，声称 Vue 3 支持可选链。然而，显然不是在节点模块中。 atflick 于 2021 年 2 月 26 日在this thread 中的帖子对您​​有很大帮助。

【讨论】：

非常感谢@JJJSchmidt :) 它比我发现的更好地解决了我的问题 :)

很高兴我能帮上忙。在一个更大的项目中，它有助于将加载器集中在只处理有问题的模块上。我编辑了答案以添加 .include 语句来实现这一点。我发现 babel 加载器很慢并且在大型节点模块上绊倒。明确目标可以避免这个问题。

@JJJSchmidt 这个解决方案也对我有用。干杯!虽然我不明白为什么 babel.config.js 可选链插件不起作用： // My babel.config.js: module.exports = presets: [ '@vue/cli-plugin-babel/preset' ], plugins: ['@babel/plugin-proposal-optional-chaining']

【参考方案2】：

我遇到了类似的问题。我正在使用 nuxt，但我的 .babelrc 文件如下所示，并且对我有用。

  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins":[
    ["@babel/plugin-transform-runtime",
        
          "regenerator": true
        
    ]
  ],
  "env": 
    "test": 
      "plugins": [
        ["transform-regenerator", 
            "regenerator": true
        ],
        "@babel/plugin-transform-runtime"
        ],
      "presets": [
        ["@babel/preset-env", 
            "useBuiltIns": false
        ]
      ]
    
  

【讨论】：

if (this.options.valueRange?.min !== undefined) 与 if (!!this.options.valueRange?.min) 不同。后者显然会为 0 错误。!! 在if 中是不需要的

我刚刚尝试了您的解决方案，但我仍然遇到同样的问题：/

你能提供一些额外的解释吗？您是否需要同时添加插件和预设？如何设置这些选项，例如"regenerator: true 导致编译器处理可选链接而不出现 Unexpected token 错误？

【参考方案3】：

我设法通过将这些行添加到package.json 来修复解决方案：

...
"scripts": 
   "preinstall": "npx npm-force-resolutions",
   ...
,
"resolutions": 
  "acorn": "8.0.1"
,
...

【讨论】：

警告：虽然这会在为应用程序提供服务时解决问题，但如果您使用 Terser 则不会