Fresh create-react-app - Typescript

[mikepatrick]

First, I'd like to say that I'm impressed with what I've seen so far. Nice work. I'm hoping to use Amplify in an existing React application written in Typescript.

So, I pulled aws-amplify and aws-amplify-react into a fresh create-react-app project of the Typescript variety:

create-react-app sample-app --scripts-version=react-scripts-ts

I ran into a few issues, and I'm not sure if a PR is appropriate, or if I just need advice.

Issue 1

I'm importing Amplify into my React application like this:

import Amplify from 'aws-amplify';

And I get this error both in VSCode and when I try yarn build:

error TS7016: Could not find a declaration file for module 'aws-amplify'. 'D:\sample-app\node_modules\aws-amplify\lib\index.js' implicitly has an 'any' type.
  Try `npm install @types/aws-amplify` if it exists or add a new declaration (.d.ts) file containing `declare module 'aws-amplify';`

The work around

I worked around this by adding the following to package.json in aws-amplify/packages/aws-amplify:

"typings": "./lib/index.d.ts",

Issue 2

Next issue is that aws-amplify/lib/Common/Logger/ConsoleLogger.d.ts complains:

error TS2307: Cannot find module './logger-interface'.

This also happens in VSCode as well as with yarn build.

The work around

I worked around this by renaming aws-amplify/src/Common/Logger/logger-interface.d.ts to logger-interface.ts, and rebuilding Amplify. This way logger-interface.d.ts (along with a .js file and a source map) are generated by the build.

After these two work arounds, the React app compiles and runs as expected.

Issue 3

This one isn't a problem with the React app; this one is a problem I'm having when I actually clone aws-amplify. I considered a separate issue for this, but I don't want to clutter up what's bound to be a rapidly growing backlog. Nevertheless, I figured I'd mention it while I've got the mic.

When I open the tests, VSCode barks at me about all the Jest Globals - can't find describe, can't find expect, etc. The tests do run fine, so it seems like something specific to VSCode (perhaps my VSCode environment, in particular?).

The work around

I worked around this by adding a jsconfig.json file in aws-amplify/packages/aws-amplify, with the following contents:

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

This made VSCode happy.

Any advice?

I'd be happy to submit a PR for any of this, if it's appropriate. I'd also be happy to help with documentation or testing that might help smooth the path for Typescript developers.

These few minor changes have been checked into my fork, if anybody wants a closer look.

I feel like there's a reasonable chance I'm just doing something(s) wrong or missing something. I'm really excited about this library, so any advice is most welcome.

Version Notes

create-react-app version 1.4.3 using Typescript version 2.5.3.

[mlabieniec]

@mikepatrick thanks so much for the awesome feedback! 👍 I tested what you mentioned on the typescript stuff and it seems good with other projects as well i.e. typings in package.json etc. Feel free to submit a PR for that stuff for sure and we can get that merged in. More typescript support (and cleanup), including samples is in our backlog as well just fyi.

For the vscode issue, I'm not sure, let me look into that for you and see if we can clean this up. We also have some more vscode integrations (snippets) in our backlog as well.

[mikepatrick]

@mlabieniec Thanks for looking into this and getting back to me so quickly! I submitted a PR for issues 1 and 2.

With respect to issue 3, I fear that I may have raised a false alarm. I went back to do some testing, and everything works fine without any jsconfig.json file, as long as I remember to open the package folder (aws-amplify/packages/aws-amplify) rather than the root folder (aws-amplify/) in VSCode.

So, please disregard my "issue" 3. I'm very glad to hear VSCode integrations are in the works.

Thanks again for the speedy reply, and for being so genuinely receptive to feedback.

[mlabieniec]

@mikepatrick no problem, thanks a lot for catching this! I also didn't see that (issue 3) when running through tests in vscode.

[github-actions]

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 *-help channels or Discussions for those types of questions.