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: [
    // ...
      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! Embed: {% youtube hCoRYc_FzK0 %}

Tagged in: #tech #aws #amplify #rollup #javascript

Leave a reaction if you liked this post! 🧡
Loading comments...

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content