Skip to main content

​
Styles Not Applied

If components don’t appear styled correctly, you may be missing the Provider wrapper.

​
Solution

Wrap your application with the Provider component (for natds-web) or ThemeProvider (for natds-react): 
import React from 'react';
import { Provider, Button, Icon } from '@naturacosmeticos/natds-web';

export const App = () => (
  <Provider>
    <Button color="primary" variant="contained">
      <Icon name="filled-action-add" size="tiny" />
      Button
    </Button>
  </Provider>
);

​
Invalid Hook Call

This error typically occurs due to React version mismatches.

​
Check React Dependencies

1

Check for multiple React versions

Run these commands to detect duplicate React installations:
npm ls react
npm ls react-dom
Look for multiple version entries in the output.
2

Deduplicate dependencies

Run npm dedupe to resolve duplicate packages:
npm dedupe
Then try running your application again.
3

Check peer dependency versions

Ensure your React versions match the peer dependencies:
{
  "react": ">= 16.8.4",
  "react-dom": ">= 16.8.4"
}

​
Material-UI Conflicts

If you have @material-ui/core installed directly:
  1. Check if you have conflicting versions
  2. Try varying your @material-ui/core version
  3. Consider uninstalling @material-ui/core and reinstalling @naturacosmeticos/natds-web
Avoid installing @material-ui/core directly when using natds-web, as it’s already included.

​
TypeScript Duplicate Identifier Errors

This occurs when TypeScript finds duplicate type definitions.

​
Solution

1

Deduplicate dependencies

npm dedupe
2

Clear TypeScript cache

rm -rf node_modules
rm package-lock.json
npm install
3

Check skipLibCheck

Add to your tsconfig.json:
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

​
Font Loading Issues

If fonts don’t load correctly, ensure they’re properly included.

​
For natds-web

Add fonts to your HTML: 
<!-- Roboto Font -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

<!-- Icon Font -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css"
/>

​
For natds-react

Import fonts in your ThemeProvider setup - see Theme Provider documentation.

​
Build Warnings

​
Peer Dependency Warnings

If you see peer dependency warnings during installation: 
npm WARN @naturacosmeticos/natds-web requires a peer of react@>=16.8.4
Solution: Update your React version: 
npm install react@latest react-dom@latest

​
Bundle Size Warnings

If your bundle size is unexpectedly large:
  1. Use tree-shaking with ES modules
  2. Import only the components you need
  3. Consider code splitting for large applications
// Good - tree-shakeable
import { Button } from '@naturacosmeticos/natds-react';

// Avoid - imports everything
import * as NatDS from '@naturacosmeticos/natds-react';

​
Component Not Rendering

If a component renders but appears broken or unstyled:
Open browser DevTools and look for:
  • JavaScript errors
  • Failed network requests
  • React warnings
Ensure you’re importing from the correct package:
// natds-react
import { Button } from '@naturacosmeticos/natds-react';

// natds-web
import { Button } from '@naturacosmeticos/natds-web';
Some components require specific props to render correctly. Check the component documentation.

​
Server-Side Rendering (SSR)

For Next.js or other SSR frameworks:

​
CSS-in-JS Hydration

Add Material-UI’s SSR setup for natds-web: 
// pages/_document.tsx
import { ServerStyleSheets } from '@material-ui/core/styles';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: [
        ...React.Children.toArray(initialProps.styles),
        sheets.getStyleElement(),
      ],
    };
  }
}

​
Production Build Issues

​
Minification Errors

If your production build fails:
  1. Check for console.log statements using optional chaining
  2. Ensure your build tools support ES2019+
  3. Add polyfills if targeting older browsers

​
Missing Dependencies

Ensure all dependencies are in dependencies, not devDependencies: 
{
  "dependencies": {
    "@naturacosmeticos/natds-react": "^2.71.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

​
Still Having Issues?

If these solutions don’t resolve your issue:
  1. Update npm globally: npm install -g npm
  2. Clear all caches: 
    rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install
  3. Check the GitHub Issues
  4. Create a new issue with:
    • Your package versions
    • Complete error messages
    • Minimal reproduction code

​
Common Error Messages

Cause: Multiple React versions or incorrect React versionFix: Run npm ls react and npm dedupe, ensure React >= 16.8.4
Cause: Missing icon packageFix: Icons are bundled with natds-react and natds-web, reinstall the main package
Cause: Missing theme providerFix: Wrap your app with Provider or ThemeProvider
Cause: Component is rendered outside theme providerFix: Ensure all components using theme are inside Provider/ThemeProvider

​
Related Documentation

Installation Guide

Proper setup instructions

Theme Provider

Theming configuration

TypeScript Guide

TypeScript best practices

GitHub Issues

Report bugs and get help

Build docs developers (and LLMs) love

Get started for freeTalk to us