Pricing

Troubleshooting

Fix the common problems when setting up or using the theme editor.

The button doesn't show up

  • Not in development. <ThemeEditor /> renders only when NODE_ENV is development: in next dev or vite, not in next start, vite preview or a deploy.
  • Not rendered. Check that <ThemeEditor /> is in the root layout (Next) or next to your app in main.tsx (Vite), and not inside a route that is not open.

"HTTP 404. Is the @slabui/theme-react plugin in your config?"

The editor opened, but the theme server didn't answer: the plugin is missing. Add withTheme to next.config.ts or themes() to vite.config.ts (see Installation) and restart the dev server: config files are read only at startup.

"only local requests are allowed" (403)

The theme server answers only requests to localhost, 127.0.0.1 or [::1], from a page on one of them. It returns 403 when you open the app through a network IP (http://192.168.0.10:3000), a tunnel or a container's host name. Open it at http://localhost:<port> instead.

"set the css option or the css field in slabui.json"

The plugin doesn't know where your theme is. Run slabui init in the project, or set the css option of the plugin (Next.js, Vite).

"CSS file not found"

The css field of slabui.json, or the css option, points to a file that doesn't exist. Paths are relative to the folder where the dev server runs; in a monorepo, that's the app's folder. See the options for Next.js or Vite.

"Cannot find module '@slabui/theme-react'"

  • Old version. The root import is available from 0.0.2 for ThemeEditor, and from 0.0.3 for themeAttribute. Update the package, or import the editor from @slabui/theme-react/editor and the theme attribute from @slabui/theme-core/attribute.
  • Old module resolution. The package exposes its entries with exports. TypeScript ignores exports with "moduleResolution": "node" (or node10); use "bundler", "node16" or "nodenext" in your tsconfig.json.

"dynamic usage of require is not supported" (Next with Turbopack)

Versions up to 0.0.2 bundled a CommonJS package in the editor, which Turbopack rejects in the browser. Update @slabui/theme-react to 0.0.3 or later.

Sign in doesn't finish

Sign in with the browser opens the SlabUI login in a new tab and the editor waits for it. If it keeps waiting:

  • Finish the login in the tab that opened, then come back to your app.
  • Or sign in from the terminal with npx slabui login and reopen the editor: both use the same token.
  • With SLABUI_TOKEN set in the environment of the dev server, that token is used instead of the saved one.

My dark mode colors don't show up

The editor works with dark mode by the dark class, Tailwind's default. Projects that switch dark mode another way, such as a data-theme attribute or only the system preference, don't get their dark colors in the editor yet.

My change was overwritten

While the editor is open, changes made outside it (your code editor, git checkout, slabui add) show up in it, but your draft keeps winning. If a file changed a variable that is also in your draft, the footer says so: click Discard to drop the draft and keep the file, or Save theme to keep the draft.