Making AWS Amplify work with Rollup

AWS Amplify assumes CommonJS, which Rollup doesn't work well with (Hence all Amplify web app examples use Webpack). I recently discovered that you can make it work with Rollup with a few tweaks.

Let's take the default Svelte app, which uses Rollup:

npx degit sveltejs/template my-svelte-projectcd my-svelte-projectnpm install

This default rollup template lacks just two things you need to use Amplify with Rollup. Install @rollup/plugin-json:

npm i -D @rollup/plugin-json

And add it to your rollup.config.js. Also set the node-resolve plugin's preferBuiltins option to true:

import resolve from "@rollup/plugin-node-resolve";import json from "@rollup/plugin-json"; // new!export default {  // ...  plugins: [    // ...    resolve({      browser: true,      preferBuiltins: false, // new!      dedupe: ["svelte"],    }),    json(),                  // new!    // ...  ]}

And now you are done!

This setup will work fine with Amplify. For a full demo adding a full Amplify CRUD backend to a working Svelte frontend in under 30 mins, check out my recent practice run here!

Dev.to Embed: