AWS Amplify TypeScript aws-exports.js

Importing aws-exports.js with TypeScript Error

I was running into an issue using the AWS Amplify amplify-js package in a TypeScript project.

When I was importing the aws-exports.js configuration file to initialize Amplify, the TypeScript compiler was erroring:

import React from "react";
import Amplify from "aws-amplify";

import config from "../../aws-exports";                   ^^^^^^^^^^^^^^^^^

// Call configuration API at the global Layout level
Amplify.configure(config);

// Layout Component code...

Could not find a declaration file for module '../../aws-exports'.

'.../src/aws-exports.js' implicitly has an 'any' type.ts(7016)

Create an aws-exports.d.ts Module Declaration File

The solution is to create an ./src/@types/aws/aws-exports.d.ts TypeScript module declaration file.

declare const awsmobile: {};
export default awsmobile;

Also, since aws-exports.js is a .js file extension, tsconfig.json needs to be updated to allow JavaScript files.

{
  "compilerOptions": {
    "allowJs": true    // Other configs ...
  }
}