DEV Community

loading...

Making AWS Amplify work with Rollup

swyx profile image swyx Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
    // ...
  ]
}
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (2)

pic
Editor guide
Collapse
illusivemilkman profile image
Willem Booysen • Edited

Thanks for posting.

Small typo in explanation (but fine in example code) => preferBuiltins: false

Collapse
swyx profile image
swyx Author

fixed thx!