AWS Amplify Ionic 5 Angular 10 build error

与世无争的帅哥 提交于 2021-02-07 11:01:20

问题


Our team at my company has encountered an issue which we can't seem to find the solution to and I was hoping someone here could help us out. We use AWS Amplify in our Angular 10/Ionic 5 project and we do get the following error:

Uncaught ReferenceError: exports is not defined
at Module../node_modules/@aws-sdk/middleware-serde/build/deserializerMiddleware.js (vendor.js:344144)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/@aws-sdk/middleware-serde/build/index.js (index.ts:1)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/commands/CreateIdentityPoolCommand.js (CognitoIdentityClient.ts:302)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/CognitoIdentity.js (vendor.js:183202)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-sdk/client-cognito-identity/dist/es/index.js (index.ts:1)
at __webpack_require__ (bootstrap:84)

Here is a snippet from our package.json. I was wondering if this issue has anything to do with webpack or if it is Angular/Typescript/Ionic related.

 {
      "private": true,
      "dependencies": {
        "@angular/animations": "^10.0.2",
        "@angular/cdk": "^10.0.1",
        "@angular/common": "^10.0.2",
        "@angular/core": "^10.0.2",
        "@angular/forms": "^10.0.2",
        "@angular/material": "^10.0.1",
        "@angular/platform-browser": "^10.0.2",
        "@angular/platform-browser-dynamic": "^10.0.2",
        "@angular/router": "^10.0.2",
        "@auth0/angular-jwt": "^4.2.0",
        "@aws-amplify/ui-angular": "^0.2.9",
        "@ionic-native/camera": "^5.27.0",
        "@ionic-native/code-push": "^5.27.0",
        "@ionic-native/contacts": "^5.27.0",
        "@ionic-native/core": "^5.27.0",
        "@ionic-native/deeplinks": "^5.27.0",
        "@ionic-native/diagnostic": "^5.27.0",
        "@ionic-native/file": "^5.27.0",
        "@ionic-native/file-opener": "^5.27.0",
        "@ionic-native/file-transfer": "^5.27.0",
        "@ionic-native/google-plus": "^5.27.0",
        "@ionic-native/photo-viewer": "^5.27.0",
        "@ionic-native/push": "^5.27.0",
        "@ionic-native/splash-screen": "^5.27.0",
        "@ionic-native/status-bar": "^5.27.0",
        "@ionic/angular": "^5.2.2",
        "@types/chai": "^4.2.11",
        "@types/chai-as-promised": "^7.1.2",
        "@types/cucumber": "^6.0.1",
        "@types/gapi": "0.0.39",
        "@types/gapi.auth2": "0.0.52",
        "@types/gapi.client": "^1.0.3",
        "@types/gapi.client.drive": "^3.0.8",
        "@types/gapi.client.people": "^1.0.2",
        "@types/gapi.client.sheets": "^4.0.9",
        "@types/google.analytics": "0.0.40",
        "ajv": "^6.12.2",
        "aws-amplify": "^3.0.18",
        "aws-amplify-angular": "^5.0.18",
        "aws-sdk": "^2.708.0",
        "chromedriver": "^83.0.0",
        "code-push": "3.1.5",
        "com-sarriaroman-photoviewer": "^1.2.5",
        "cordova": "^9.0.0",
        "cordova-android": "^9.0.0",
        "cordova-ios": "^6.1.0",
        "cordova-plugin-camera": "4.1.0",
        "cordova-plugin-code-push": "1.12.5",
        "cordova-plugin-contacts": "^3.0.1",
        "cordova-plugin-device": "2.0.3",
        "cordova-plugin-dialogs": "2.0.2",
        "cordova-plugin-file": "6.0.2",
        "cordova-plugin-file-opener2": "3.0.2",
        "cordova-plugin-file-transfer": "1.7.1",
        "cordova-plugin-googleplus": "^8.5.0",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "5.0.0",
        "cordova-plugin-splashscreen": "5.0.4",
        "cordova-plugin-statusbar": "2.4.3",
        "cordova-plugin-whitelist": "1.3.4",
        "cordova-plugin-zip": "^3.1.0",
        "cordova-support-google-services": "^1.4.1",
        "cordova.plugins.diagnostic": "^5.0.2",
        "core-js": "^3.6.5",
        "ionic": "^5.4.16",
        "ionic-cli": "0.0.0",
        "ionic-plugin-deeplinks": "^1.0.20",
        "moment": "^2.27.0",
        "ng2-pdf-viewer": "^6.3.1",
        "phonegap-plugin-multidex": "^1.0.0",
        "phonegap-plugin-push": "^2.3.0",
        "rxjs": "~6.5.5",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.3"
      },
      "devDependencies": {
        "@angular-devkit/architect": "^0.1000.0",
        "@angular-devkit/build-angular": "~0.1000.0",
        "@angular-devkit/core": "^10.0.0",
        "@angular-devkit/schematics": "^10.0.0",
        "@angular/cli": "~10.0.0",
        "@angular/compiler": "^10.0.2",
        "@angular/compiler-cli": "^10.0.2",
        "@angular/language-service": "^10.0.2",
        "@ionic/angular-toolkit": "^2.2.0",
        "@types/jasmine": "^3.5.11",
        "@types/jasminewd2": "^2.0.8",
        "@types/node": "^14.0.14",
        "chai": "^4.2.0",
        "chai-as-promised": "^7.1.1",
        "chalk": "^4.1.0",
        "clear": "^0.1.0",
        "clui": "^0.3.6",
        "codelyzer": "^5.2.2",
        "cucumber": "^6.0.5",
        "figlet": "^1.4.0",
        "inquirer": "^7.2.0",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.2",
        "karma": "~5.1.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~3.3.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "minimist": "^1.2.5",
        "open": "^7.0.4",
        "protractor": "~7.0.0",
        "protractor-cucumber-framework": "^6.2.1",
        "ts-node": "^8.10.2",
        "tslint": "~6.1.2",
        "typescript": "^3.8.2",
        "webdriver-manager": "^12.1.7",
        "webpack-bundle-analyzer": "^3.8.0"
      }
    }

We have also included (tsconfig.app.json):

"angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": false
  },

I have found multiple sources with different problems with AWS Amplify and Ionic/Angular but non of them seem to be the same as your problem.


回答1:


Try:

rm -rf node_modules
rm package-lock.json
npm i

it helped in our case.




回答2:


Got the same issue (Angular 10) and solved it by following a workaround found on the aws-sdk-js GitHub Issue page here.

In short, you have to follow 2 steps below:

  1. Install the node typings with npm i --save-dev @types/node (I know this is weird since we are on a front-end app but the AWS SDK does require node typings)

  2. add "types": ["node"] in the "compilerOptions" section of your tsconfig.app.json file.

In my case, tsconfig.app.json file becomes:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "node"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts"
  ]
}


来源:https://stackoverflow.com/questions/62680285/aws-amplify-ionic-5-angular-10-build-error

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!