DEV Community

loading...
Cover image for How to use Kontent Delivery SDK with native ESM and Vite
Kentico Kontent

How to use Kontent Delivery SDK with native ESM and Vite

Ondrej Polesny
Blazor, .NET and Vue.js dev, bus driver, 3D printing enthusiast, German Shepherd lover, dev evangelist @Kontent
・3 min read

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. 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

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 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:

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

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.

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:

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

const client = new DeliveryClient({
      ...
      richTextParserAdapter: new BrowserRichTextParser()
    });
Enter fullscreen mode Exit fullscreen mode

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 if you don't want to miss any new articles 🐤

Discussion (0)