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-project
cd my-svelte-project
npm 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 false:

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: