# VITE configuration for template "confluence-macro-with-configuration" correct? **URL:** \ **Category:** Forge\ **Tags:** custom-ui, confluence-cloud, forge-custom-ui\ **Created:** [July 11, 2025, 12:31pm UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776 "2025-07-11T12:31:16Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![DevelopMgr](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@DevelopMgr](https://community.developer.atlassian.com/u/DevelopMgr)\ **Post date:** [July 11, 2025, 12:31pm UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776/1 "2025-07-11T12:31:16Z")
Hi everyone, I just created a Confluence macro (Custum UI) with the template “`confluence-macro-with-configuration`”. `node_modules` are already created during the `forge create` process. I didn’t change any code! After `forge deploy` and `forge install` I added the macro to a page. - The “config” **appears as a modal in a white page!** - The browser console shows the error: **TypeError: Cannot read properties of null (reading ‘useState’ )** It seems, that React isn’t loaded correctly. Is the **Vite configuration** the culprit? Other ideas? Additional questions: - Is Vite supported by the Forge team? - Is there any documentation how to configure Vite with Forge? BR, Franz [manifest.yml.txt](https://community.developer.atlassian.com/uploads/short-url/dfRlO0cREFCfn8pFLGIZ46SfBk9.txt) (648 Bytes) [package.json.txt](https://community.developer.atlassian.com/uploads/short-url/3in5CmmIFUv47WNuKRgMPKWdksC.txt) (742 Bytes) [vite.config.js](https://community.developer.atlassian.com/uploads/short-url/7IdCWLGPLAbqCgXNPMYAV7P5M10.js) (110 Bytes) ![CustomcConfig20250711-Org_Console](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/1/5/1532e82adbb147d4788471a7636b9176a2dc5653.png) ---
**Author:** ![AlexCevicelow](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@AlexCevicelow](https://community.developer.atlassian.com/u/AlexCevicelow)\ **Post date:** [July 11, 2025, 2:56pm UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776/2 "2025-07-11T14:56:27Z")
Vite does work with Forge, but getting it set up reliably isn’t exactly straightforward. Especially if you haven’t spent much time working with JS build tools inside a platform like this. A few things to keep in mind: - **The error you’re seeing just means the React packages are missing.** You need to install them manually. Check the `README.md` for the right subdirectory to `cd` into, usually something under `static/`, and then run `npm install`. The default packages are outdated. Run the following to clean up broken or deprecated dependencies: ```auto npm audit fix npm audit fix --force ``` - You’ll want to define a `dev` script in each `package.json` inside the `static/*` directories so you can run `npm run dev` and have Vite start with the right config. Make sure your Vite config points to the correct entry and asset paths based on the Forge structure. - When you use `forge create`, it sets up the top-level layout, but each `static` app is its own standalone React + Vite project. Treat it the same as you would any other Vite project. - Don’t forget to run `npm run build` before deploying. This is also covered in the `README.md`. - If you’re running into tunneling issues or hot reload doesn’t sync properly, I posted a reply earlier today that shows how to run Vite with tunneling inside Forge. Check my other posts for that example. ---
**Author:** ![DevelopMgr](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@DevelopMgr](https://community.developer.atlassian.com/u/DevelopMgr)\ **Post date:** [July 12, 2025, 9:31am UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776/3 "2025-07-12T09:31:27Z")
@AlexCevicelow thanks for the fast reply! Are you referring to the `README.md` that is delivered during the `forge create` task? I’m a little bit confused 🤔 - I am new to Vite. In my impression the generated structure is quasi-standard for VIte projects within Forge: ```auto / ¦ manifest.yml ¦ package-lock.json ¦ package.json ¦ +---node_modules ¦ ... +---src ¦ index.js +---static +---config ¦ ¦ index.html ¦ ¦ vite.config.js ¦ +---build ¦ +---src ¦ Config.jsx ¦ index.jsx +---hello-world ¦ index.html ¦ vite.config.js +---build +---src App.jsx index.jsx ``` So - do I need to `npm install` in each static subfolders config & hello-world? Can one show me a working example (Github / Bitbucket)? Thanks, Franz ---
**Author:** ![DevelopMgr](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@DevelopMgr](https://community.developer.atlassian.com/u/DevelopMgr)\ **Post date:** [July 15, 2025, 1:52pm UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776/4 "2025-07-15T13:52:48Z")
@ Atlassian Forge team: Can you pls. answer the questions (support & documentation) For official templates created with `forge create`, I’d expect them to work without further intervention. BR, Franz ---
**Author:** ![DevelopMgr](https://avatars.discourse-cdn.com/v4/letter/d/ba8739/32.png) [@DevelopMgr](https://community.developer.atlassian.com/u/DevelopMgr)\ **Post date:** [July 17, 2025, 2:36pm UTC](https://community.developer.atlassian.com/t/vite-configuration-for-template-confluence-macro-with-configuration-correct/93776/5 "2025-07-17T14:36:04Z")
In the meantime I could resolve this issue by adding “@vitejs/plugin-react” to the dev-Dependencies. Also I changed vite.config.js: ```auto import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react()], build: { outDir: 'build' } }) ``` This worked 🙂