Vue.js 2导入AWS AppSync配置时Webpack Loader报错求助

问题根源 #

Vue.js 2项目默认的Babel配置不会转译node_modules目录下的第三方包，而@aws-sdk/signature-v4这类AWS SDK包使用了ES6+的可选链操作符?.，你的项目Webpack/Babel环境没对这些包做转译，导致出现loader缺失的错误。之前配置graphql loader无效是因为问题根本不在graphql文件解析，而在ES语法转译；配置json loader后出现JSON错误，大概率是和Vue CLI默认的json处理规则冲突了。

解决方案步骤 #

1. 配置Babel转译AWS SDK相关包

修改项目根目录下的babel.config.js，将AWS SDK相关包加入transpileDependencies数组，让Babel处理这些包的ES6+语法：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  transpileDependencies: ['@aws-sdk', 'aws-appsync']
}

如果还有其他AWS相关包出现类似问题，也可以把对应的包名加进去。

2. 清理冲突的loader配置

打开vue.config.js，移除之前添加的json loader配置（Vue CLI已经内置了json文件的处理规则，手动添加会导致解析冲突）。如果你的项目确实需要处理graphql文件，保留graphql loader配置即可，示例如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.graphql$/,
          loader: 'graphql-tag/loader'
        }
      ]
    }
  }
})

3. 清理缓存并重新构建

执行以下命令清理依赖缓存和构建缓存，确保新配置生效：

rm -rf node_modules package-lock.json
npm install
npm run serve

如果使用yarn，替换为对应的yarn命令即可。

验证 #

重新启动项目后，Webpack应该能正常转译@aws-sdk/signature-v4里的可选链语法，不会再出现loader缺失的错误。如果还有其他类似的ES语法错误，检查是否有其他未被转译的第三方包，将其加入transpileDependencies即可。

内容的提问来源于stack exchange，提问作者Martin Francisco Berkhoff Jere