How to use Kontent Delivery SDK with native ESM and Vite
Tags: kontent, vite, es2015, esnext
Published: 2021-03-31 12:11:40

## Why native ESM and Vite?

When working on JavaScript projects, we are used to bundling every bit of functionality into a JS bundle that is then served to all visitors of our sites. With native ESM we can get around the bundling and serve modular JS code to modern browsers directly and dynamically.

One of the tools that help us with this task is [Vite](https://vitejs.dev/guide/why.html). It effectively replaces Webpack and allows for instant cold-start of your development server as well as ensures optimal output for production. In turn, it asks for all code to be compatible with ES2015 and newer, so no CommonJS anymore.

If you try to build your site with Vite and your code does not comply, you will most likely see the following error:

`❌ Uncaught ReferenceError: exports is not defined at ...`

The error occurs after you generate the production build and comes from your Vite-optimized code bundle. It means there is some unsupported functionality left in your code or in the packages that you use.

The Kontent JS Delivery SDK may be one of them. To configure it to work with Vite you need to do the following:

## Target ESNext version of the Delivery SDK

The Kontent JS Delivery SDK from version 10.4.1 comes with the ESNext version in a subfolder _esNext so you just need to ensure your code uses it. But to make it a bit more complicated, you also need to use _es2015 (the newest) version of `kontent-core` package that the `kontent-delivery` depends on.

![ESNext version in a subfolder of the Kontent JS Delivery SDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lj3oh8vmll2azlcodke.png)

So you see, you can't just adjust all your imports to use a subfolder _esNext. To solve this issue, you need to [tell Vite to redirect](https://vitejs.dev/config/#resolve-alias) all relevant imports to that specific subfolder. Vite passes this information to Rollup - the module bundler it uses internally. The *vite.config.ts* looks like this:

```js
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@kentico/kontent-core': '@kentico/kontent-core/_es2015',
      '@kentico/kontent-delivery': '@kentico/kontent-delivery/_esNext'
    }
  }
})
```

We are redirecting all `kontent-core` and `kontent-delivery` imports to the respective subfolders.

*Note: If you're not using Vite and need to do the same with Webpack, see [this page in their docs](https://webpack.js.org/configuration/resolve/).*

## Add BrowserRichTextParser to DeliveryClient config

The SDK may be used in both browser and Node environments. Because Node.js does not feature browser API, the SDK is capable of dynamically loading a (much larger) Node.js parser based on the runtime context. However, some compatibility issues with Angular required the use of CommonJS's `require`.

You're building a website, so you can get around this by defining the browser-specific parser in the `DeliveryClient` config:

```js
import { BrowserRichTextParser } from '@kentico/kontent-delivery'

const client = new DeliveryClient({
      ...
      richTextParserAdapter: new BrowserRichTextParser()
    });
```

And that's it. You're good to go 🤗 Try `npm run build` and `npm run serve` and your console should be nice and clean.

If you're using only ES2015+ compatible packages, using Vite you can get a much better development experience with zero waits and more effective production bundles.

Follow my [Twitter](https://twitter.com/ondrabus) if you don't want to miss any new articles 🐤