Vue.js + TypeScript build error, `Could not find a declaration file for module '@aws-amplify/ui'`

[yukitaka13-1110]

Vue.js + TypeScript + AWS Amplify, I encountered the following error. Could not find types file. Is this error default behavior ? Is there a way to avoid this error?

ERROR in /mypath/node_modules/aws-amplify/lib/index.d.ts
8:16 Could not find a declaration file for module '@aws-amplify/ui'. '/mypath/node_modules/@aws-amplify/ui/dist/aws-amplify-ui.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify__ui` if it exists or add a new declaration (.d.ts) file containing `declare module '@aws-amplify/ui';`
     6 | import Cache from '@aws-amplify/cache';
     7 | import Interactions, { InteractionsClass } from '@aws-amplify/interactions';
  >  8 | import UI from '@aws-amplify/ui';
       |                ^
     9 | import XR, { XRClass } from '@aws-amplify/xr';
    10 | import Amplify, { ConsoleLogger as Logger, Hub, JS, ClientDevice, Signer, I18n, ServiceWorker } from '@aws-amplify/core';
    11 | export default Amplify;
ERROR in /mypath/src/main.ts
9:31 Could not find a declaration file for module 'aws-amplify-vue'. '/mypath/node_modules/aws-amplify-vue/dist/aws-amplify-vue.common.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify-vue';`
     7 |
     8 | import Amplify, * as AmplifyModules from 'aws-amplify'
  >  9 | import { AmplifyPlugin } from 'aws-amplify-vue'
       |                               ^
    10 | import awsexports from './aws-exports'
    11 |
    12 | Vue.config.productionTip = false
ERROR in /mypath/src/router/index.ts
9:31 Could not find a declaration file for module 'aws-amplify-vue'. '/mypath/node_modules/aws-amplify-vue/dist/aws-amplify-vue.common.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify-vue';`
     7 |
     8 | import * as AmplifyModules from 'aws-amplify'
  >  9 | import { AmplifyPlugin } from 'aws-amplify-vue'
       |                               ^
    10 | import AmplifyStore from '@/store/index'
    11 |
    12 | Vue.use(Router)
ERROR in /mypath/src/views/Home.vue
23:25 Could not find a declaration file for module 'aws-amplify-vue/src/components/storage'. '/mypath/node_modules/aws-amplify-vue/src/components/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify-vue/src/components/storage';`
    21 | // import { Component, Vue } from 'vue-property-decorator'
    22 | import { Auth, API, graphqlOperation, Storage } from 'aws-amplify'
  > 23 | import { S3Image } from 'aws-amplify-vue/src/components/storage'
       |                         ^
    24 | import router from '@/router'
    25 | import * as APITypes from '../API'
Version: typescript 3.4.5

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "strict": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "node",
      "vuetify",
      "aws-amplify-vue"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

  "dependencies": {
    "@aws-amplify/cli": "^1.7.2",
    "@aws-amplify/ui": "^1.0.19",
    "@types/graphql": "^14.2.0",
    "@types/zen-observable": "^0.8.0",
    "aws-amplify": "^1.1.28",
    "aws-amplify-vue": "^0.2.11",
    "core-js": "^2.6.5",
    "register-service-worker": "^1.6.2",
    "rxjs-compat": "^6.5.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.5",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@types/node": "^12.0.3",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-typescript": "^3.8.0",
    "@vue/cli-plugin-unit-jest": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "lint-staged": "^8.1.5",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "ts-jest": "^23.0.0",
    "typescript": "3.4.5",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.0.5"
  }

Information

Vue.js => 3.8.2 TypeScript => 3.4.5

[sammartinez]

@yukitaka13-1110 Can you upgrade to the latest versions of aws-amplify-vue and @aws-amplify/ui. Prior to upgrading, please delete your node_modules along with a lock file (e.g. package-lock.json or yarn.lock) and see if you're still experiencing this issue.

[yukitaka13-1110]

Thank you for quick response. I tried this way.

$ npm uninstall aws-amplify-vue --save
$ 

I could resolve about @aws-amplify, but I still get this error in aws-amplify-vue.

ERROR in /mypath/src/main.ts
9:31 Could not find a declaration file for module 'aws-amplify-vue'. 
'/mypath/node_modules/aws-amplify-vue/dist/aws-amplify-vue.common.js' 
implicitly has an 'any' type.
  Try `npm install @types/aws-amplify-vue`
 if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify-vue';`
     7 |
     8 | import Amplify, * as AmplifyModules from 'aws-amplify'
  >  9 | import { AmplifyPlugin } from 'aws-amplify-vue'
       |                               ^
    10 | import awsexports from './aws-exports'
    11 |
    12 | Vue.config.productionTip = false

Dose types folder exist in aws-amplify-vue ?

[sammartinez]

@yukitaka13-1110 Apologize for not explaining it further but really the steps below would be how I (myself) would go about upgrading when using yarn.

This removes any node module issues that may still be living in the lock file. rm -rf node_modules yarn.lock Installing dependencies will, which in turn adds the latest versions. yarn

However, to your point, we don't currently have typing available in our Vue library. I am going to mark this as a feature request since this isnt something we have added yet.

[lakshmi-kannan]

+1 to typing definitions.

[calebpollman]

For those currently watching this ticket, Amplify UI has released a new package for Vue components: @aws-amplify/ui-vue (additionally, aws-amplify-vue is no longer maintained).

You can find the package here and the documentation here, please let us know if it meets your needs!

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.