How to import JSON files in Rollup plugin JSON

Importing JSON files is pretty important. That’s how most of us store config settings about our app or even store mock data.

That’s what I do most of the time. Store mock data for local testing purposes.

I’m using Rollup with my Svelte project, and as I tried to import my mock data. I got this error message:

Error: 'default' is not exported by src/__mock__/networks.json

It yelled at me that I couldn’t export the data from my networks.json file.

The problem is that I need to convert my JSON files into ES6 modules.

The solution: Rollup plugin json module

We can solve this problem by using the rollup-plugin-json module.

npm i -D @rollup/plugin-json

Now you must update your rollup.config.js file.

import json from "@rollup/plugin-json";

export default {
  // ... other configs
  plugins: [
    // ... other rollup plugins
    json()
  ]
};

Another cool thing about this plugin is that you can compact the bundle size.

For example, your JSON file can get huge and you might not need everything. You can pass the parameter compact as true, and it will generate the smallest amount of code.

json({
  compact: true,
})

I like to tweet about Rollup and post helpful code snippets. Follow me there if you would like some too!