From bfbf2d6373b980e32585c3ec909031b70ad9ddd8 Mon Sep 17 00:00:00 2001
From: Darko Kukovec <darko@infinum.com>
Date: Wed, 6 Sep 2023 09:54:04 +0200
Subject: [PATCH] Document Vite usage

---
 .../troubleshooting/known-issues.md           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/website/versioned_docs/version-2.0.0/troubleshooting/known-issues.md b/website/versioned_docs/version-2.0.0/troubleshooting/known-issues.md
index 357c5a626..b7c6310af 100644
--- a/website/versioned_docs/version-2.0.0/troubleshooting/known-issues.md
+++ b/website/versioned_docs/version-2.0.0/troubleshooting/known-issues.md
@@ -18,6 +18,27 @@ The easiest way is to add a generic polyfill:
 - [Babel 7](https://babeljs.io/docs/en/babel-polyfill) - Install `@babel/polyfill` and import it in your entry file
 - TypeScript - If you're using the target `ES3`, `ES5` or you don't have a target defined, you should add the lib `ES2015` to your [`tsconfig.json` compiler options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
 
+## Usage in combination with Vite
+
+If you're using DatX with Vite and MobX, you might have an issue where it works in dev builds, but not in production builds. This is because DatX needs the commonjs `require` in order to detect MobX support, but Vite doesn't transpile `require` calls in production builds for dependencies.
+
+The solution is to use the `vite-plugin-require-transform` plugin to transform `require` calls in dependencies:
+
+```js
+// vite.config.js
+import requireTransform from 'vite-plugin-require-transform';
+
+export default {
+  plugins: [
+    requireTransform({
+      fileRegex: /.ts$|.tsx$|node_modules\/@datx/,
+    }),
+  ],
+};
+```
+
+Using `vite-plugin-commonjs` might also be a possibility, but it was not yet confirmed.
+
 ## Having other issues?
 
 Feel free to [open an issue](https://github.com/infinum/datx/issues/new/choose).