# Impact Nova — Troubleshooting

Common setup and runtime issues when using Impact Nova, and how to fix them.

---

## 1. Duplicate React or AG Grid (Vite)

**Symptom:** "Invalid hook call", "Multiple copies of React", or AG Grid warnings about multiple instances.

**Fix:** In Vite config, add `resolve.dedupe` so the app uses a single copy of React and AG Grid:

```js
// vite.config.js / vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],
  },
});
```

---

## 2. Styles not applying

**Symptom:** Components render but look unstyled or wrong.

**Fix:**

- Import Impact Nova CSS **once** at the app root, **before** your app component:  
  `import 'impact-nova/dist/impact-nova.css';`  
  Or, if you use **CSS or SCSS (no Tailwind)**, you can `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss. See installation **§5. Using Impact Nova with CSS or SCSS (no Tailwind)**.
- Ensure your build includes the CSS (no rule excluding `node_modules/impact-nova`).
- If using Tailwind, ensure the design system tokens aren’t overridden by a conflicting Tailwind theme.

---

## 3. Font (Manrope) not loading

**Symptom:** Text renders in fallback font.

**Fix:**

- Add the Manrope link in `index.html`:  
  `<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" />`
- In global CSS or Tailwind base:  
  `body { font-family: 'Manrope', sans-serif; }`

---

## 4. Chart component not found or wrong export

**Symptom:** `import { Chart } from 'impact-nova'` fails, Chart doesn't render, or dev throws:

`The requested module '.../highcharts-react-official/dist/highcharts-react.min.js' does not provide an export named 'default'`

**Fix:**

- Use the public subpath: `import { Chart } from 'impact-nova/chart';`
- Ensure Highcharts is installed: `npm install highcharts@^12 highcharts-react-official@^3`
- In Vite, add `highcharts-react-official` to `optimizeDeps.include` (the `create-impact-nova` template includes it in `HIGHCHARTS_OPTIMIZE_DEPENDENCIES`). Clear `.vite` cache and restart dev after changing config.

---

## 5. impact-nova-icons SVG warnings in Vite dev

**Symptom:** Hundreds of "Failed to resolve import" warnings for `.svg` files from `impact-nova-icons` on dev startup.

**Fix:** Exclude icons from dependency pre-bundling:

```js
optimizeDeps: {
  exclude: ['impact-nova-icons'],
},
```

If using Module Federation, add an asset URL rewrite plugin for `impact-nova-icons/dist/assets/*2.svg.js` shims.

---

## 6. React 19 — "Cannot access refs during render"

**Symptom:** React 19 error about updating or reading refs during render.

**Fix:** Never assign to `ref.current` during render. Use refs only in event handlers, effects, or callbacks. Prefer deriving values during render instead of mirroring props into refs.

---

## 6b. Truncated text tooltip not showing

**Symptom:** `OverflowTooltip` never opens, or tooltips appear inside AG Grid cells incorrectly.

**Fix:**

- Ensure the trigger has **`truncate`** (or `line-clamp`) and a bounded width so CSS overflow can occur.
- Pass explicit **`content`** when children are not plain text.
- Inside buttons, Select options, or comboboxes: keep default **`focusable={false}`** (pointer-only).
- **AG Grid cells:** use `useAgGridTruncationTooltip` from `impact-nova/ag-grid-react` — do not use `OverflowTooltip` in cell renderers.

---

## 7. HorizontalScroller or other subpath missing

**Symptom:** Import from `impact-nova/horizontal-scroller` (or similar) fails.

**Fix:**

- If the package doesn’t export that subpath, add a Vite alias to the component file and a small TypeScript declaration:

```js
// vite.config
resolve: {
  alias: {
    'impact-nova/horizontal-scroller': resolve(__dirname, 'node_modules/impact-nova/dist/components/ui/horizontal-scroller/horizontal-scroller.js'),
  },
},
```

```ts
// declare module 'impact-nova/horizontal-scroller'
declare module 'impact-nova/horizontal-scroller' {
  const Component: React.ComponentType<{ /* props */ }>;
  export default Component;
}
```

---

## 8. AG Grid CSS not applied (legacy container conflict)

**Symptom:** AG Grid in a micro-frontend (MFE) looks wrong or unstyled; the new AG Grid theme is not applied.

**Cause:** The **container** (host app) is loading legacy AG Grid CSS. Those legacy style tags conflict with the new theme, so the MFE’s AG Grid doesn’t get the correct styles.

**Fix:** Apply the fix in the **container** app, not in the MFE/remote repo. In the container, when you mount the remote (e.g. in a `useEffect`), remove the legacy AG Grid style tags from the document so the new theme can apply. Example:

```tsx
// In the CONTAINER app (not in the MFE repo)
useEffect(() => {
  const { onParentNavigate } = mount(ref.current, {
    initialPath: history.location.pathname,
    onNavigate: ({ pathname: nextPathname }) => {
      const { pathname } = history.location;
      if (pathname !== nextPathname) {
        history.push(nextPathname);
      }
    },
    containerStore,
    routes,
    defaultHistory: history,
  });

  history.listen(onParentNavigate);

  const removeAgGridStyles = () => {
    const styleTags = document.querySelectorAll('style');
    styleTags.forEach((styleTag) => {
      const content = styleTag.textContent || styleTag.innerHTML || '';
      // Legacy AG Grid styles (--ag-legacy-styles-loaded + .ag-icon)
      const isLegacyStyles =
        content.includes('--ag-legacy-styles-loaded') && content.includes('.ag-icon');
      // Generic AG Grid selectors that override the new theme
      const hasAgGridSelectors =
        content.includes('ag-grid,ag-grid-angular') ||
        content.includes('ag-grid, ag-grid-angular') ||
        content.includes('ag-grid-ng2') ||
        content.includes('ag-grid-polymer') ||
        content.includes('ag-grid-aurelia');
      if (isLegacyStyles || hasAgGridSelectors) {
        styleTag.remove();
      }
    });
  };

  removeAgGridStyles();

  const domNode = document.getElementById('itemsmart-remote'); // or your remote mount node id
  return () => {
    unmountComponentAtNode(domNode);
  };
}, []);
```

Adjust `mount`, `ref`, `history`, `containerStore`, `routes`, and the mount node id to match your container’s setup. The important part is calling `removeAgGridStyles()` so legacy AG Grid `<style>` tags are removed and the new theme can apply.

---

## 9. AG Grid license or enterprise features

**Symptom:** AG Grid shows watermark or enterprise features don’t work.

**Fix:** Set the license key once (e.g. in root or layout):

```ts
import { LicenseManager } from 'ag-grid-enterprise';

LicenseManager.setLicenseKey('your-license-key');
```

---

## 10. i18n / locale not applied

**Symptom:** Date pickers, selects, or other components show wrong locale or default English.

**Fix:** Wrap the app with `ImpactNovaProviders` from `impact-nova/form` and pass the correct `locale` (and optional `messages`):

```tsx
import { ImpactNovaProviders } from 'impact-nova/form';
import { de } from 'impact-nova/locale/de';

<ImpactNovaProviders locale="de" messages={de}>
  <App />
</ImpactNovaProviders>
```

---

## 11. React 19 compatibility

**Symptom:** Peer dependency warnings or runtime errors after adding Impact Nova.

**Fix:** Impact Nova targets React 19. Upgrade React and React DOM:

```bash
npm install react@^19 react-dom@^19
```

Use `analyze_project_for_impact_nova` with your `package.json` content to get exact recommended versions and install commands.

---

Use `get_installation_and_config` for full setup steps and `impact-nova://install` for the installation resource.