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.
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'
}
}
})
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()
});
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 🐤
Top comments (0)