Amplify-js: Could not find TypeScript declaration for '../vendor/paho-mqtt'

[antonsamper]

If you are using TypeScript and you try to install the latest version of aws-amplify you will see the following error:

/Users/username/WebstormProjects/my-project/node_modules/@aws-amplify/pubsub/lib/Providers/MqttOverWSProvider.d.ts
(1,23): Could not find a declaration file for module '../vendor/paho-mqtt'. '/Users/username/WebstormProjects/my-project/node_modules/@aws-amplify/pubsub/lib/vendor/paho-mqtt.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify__pubsub` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify__pubsub';`

Trying to install@types/aws-amplify__pubsub doesnt help as it doesnt exist so the solution is to declare it yourself.

To Reproduce

1. Error happens when starting up (npm start) a Create React App TypeScript project

Expected behavior
No loading errors

Desktop (please complete the following information):

• OS: OSX
• Browser: n/a
• Version: n/a

[antonsamper]

This is happening on both of the latest versions:

• 1.1.3
• 1.1.4-unstable.2

[meatherly]

This could be an option https://www.npmjs.com/package/@types/paho-mqtt
Not sure how much it lines up with what you need from paho-mqtt

[chris-ramon]

• A temporary fix, working for us:

  npm install @types/paho-mqtt --save-dev
  

  Update your tsconfig.json:

  +  "files": [
  +    "./node_modules/@types/paho-mqtt/index.d.ts"
  +   ]
  

[antonsamper]

@chris-ramon Thanks for adding the temporary fix and @elorzafe picking up this ticket.

[meatherly]

@chris-ramon
The only reason I can't use files is because fork-ts-checker-webpack-plugin uses files for compiling and linting. I feel like I've went in circles all day trying to figure out this problem but no luck. You have any suggestions for those who have used https://github.com/wmonk/create-react-app-typescript to setup their project?

[meatherly]

After discussing with a colleague of mine we came up with a workaround to solve the problem. I believe this problem relates to https://github.com/Microsoft/TypeScript/issues/15031.
Work around:

1. Install @typs/paho-mqtt for types. npm install -D @types/paho-mqtt
2. create a global.d.ts if you haven't already.
3. Add code below this to global.d.ts

declare module '*/vendor/paho-mqtt' {
  export { Client } from 'paho-mqtt';
}

[jinjingbo]

@meatherly

1. Install @typs/paho-mqtt

Typo, it should be @types...

[elorzafe]

I've just tried aws-amplify@unstable (1.1.6-unstable.1) with create-react-app typescript project, and the typescript error is not there anymore.

[antonsamper]

I just tested on version 1.1.6 and can confirm its working as expected.

[orcunorcun]

Same issue with

"amazon-cognito-identity-js": "3.2.0",
"aws-amplify": "1.2.4",
"aws-amplify-react-native": "2.2.3",
"react": "16.8.1",
"react-native": "0.61.3",

error: bundling failed: Error: Unable to resolve module ../vendor/paho-mqtt from node_modules/@aws-amplify/pubsub/lib/Providers/MqttOverWSProvider.js:

None of these files exist:

• node_modules/@aws-amplify/pubsub/lib/vendor/paho-mqtt(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• node_modules/@aws-amplify/pubsub/lib/vendor/paho-mqtt/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

[orcunorcun]

with "aws-amplify": "1.2.3-unstable.0", working well!

[lissau]

Getting same error message as @orcunorcun with

"amazon-cognito-identity-js": "^3.0.15",

"aws-amplify": "^1.2.4",

"aws-amplify-react-native": "^2.2.3",

"react": "16.8.6",

"react-native": "0.60.5",

[lissau]

version 1.2.3-unstable.0 works.

1.2.4 does not have the folder "@aws-amplify/pubsub/lib/vendor/"

[daanoz]

Created a new ticket for this as this one is already closed, and does not seem to describe the same issue: https://github.com/aws-amplify/amplify-js/issues/4352