Troubleshooting

Common issues and solutions when using the DAP Design System.

Webpack Build Errors Day.js TypeScript Declaration Files Error (Legacy - No Longer Applicable)

Note: As of version 0.47.2, the DAP Design System no longer uses dynamic imports for Day.js locales. This issue should not occur in current versions. If you're using an older version, consider upgrading.

Legacy Solution (for older versions)

Error Message:

Module parse failed: Unexpected token (3:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
> declare module 'dayjs/locale/*' {

Root Cause:

Older versions of the DAP Design System used dynamic imports of Day.js locale files, which caused webpack to encounter TypeScript declaration files (.d.ts) during build time.

Solution for older versions:

Add a webpack IgnorePlugin to ignore all .d.ts files. The exact implementation depends on your build tool:

Docusaurus

Add this to your docusaurus.config.ts:

import type { Config } from '@docusaurus/types'
import type { Configuration } from 'webpack'
import webpack from 'webpack'

const config: Config = {
  // ... your existing config
  plugins: [
    function (context, options) {
      return {
        name: 'webpack-config-plugin',
        configureWebpack(config: Configuration, isServer: boolean) {
          return {
            plugins: [
              ...(config.plugins || []),
              // Ignore TypeScript declaration files, especially from dayjs
              new webpack.IgnorePlugin({
                checkResource(resource: string) {
                  // Ignore all .d.ts files
                  return /\.d\.ts$/.test(resource)
                },
              }),
            ],
          }
        },
      }
    },
  ],
}

export default config
Next.js (with webpack)

Add this to your next.config.js or next.config.mjs:

const webpack = require('webpack')

module.exports = {
  webpack: config => {
    config.plugins.push(
      new webpack.IgnorePlugin({
        checkResource(resource) {
          // Ignore all .d.ts files
          return /\.d\.ts$/.test(resource)
        },
      }),
    )
    return config
  },
}
Create React App / react-scripts

You'll need to use react-app-rewired or craco to customize webpack:

With react-app-rewired:

  1. Install: npm install react-app-rewired --save-dev
  2. Create config-overrides.js:
const webpack = require('webpack')

module.exports = function override(config) {
  config.plugins.push(
    new webpack.IgnorePlugin({
      checkResource(resource) {
        return /\.d\.ts$/.test(resource)
      },
    }),
  )
  return config
}
  1. Update package.json scripts:
    • Change react-scripts to react-app-rewired

With CRACO:

  1. Install: npm install @craco/craco --save-dev
  2. Create craco.config.js:
const webpack = require('webpack')

module.exports = {
  webpack: {
    configure: config => {
      config.plugins.push(
        new webpack.IgnorePlugin({
          checkResource(resource) {
            return /\.d\.ts$/.test(resource)
          },
        }),
      )
      return config
    },
  },
}
  1. Update package.json scripts:
    • Change react-scripts to craco
Vite

Vite typically handles this automatically, but if you encounter issues, you can configure it in vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['dayjs/locale/*.d.ts'],
  },
  build: {
    rollupOptions: {
      external: id => {
        return /\.d\.ts$/.test(id)
      },
    },
  },
})

Why This Happens:

The DAP Design System uses dynamic imports for Day.js locales:

// Dynamic import - works for most bundlers
import(`dayjs/locale/${localeCode}`)

When webpack analyzes these dynamic imports at build time, it:

  1. Tries to determine all possible import paths
  2. Encounters both .js files (which work fine) and .d.ts files (TypeScript declarations)
  3. Attempts to parse the .d.ts files as JavaScript modules, causing build failures

The IgnorePlugin tells webpack to skip the .d.ts files entirely, allowing only the .js files to be processed.

Note: Other bundlers like Vite, Rollup, and esbuild handle this automatically and don't require the workaround.

Alternative Solutions:

If you cannot modify webpack configuration, you can:

  1. Use a different bundler - Vite, Rollup, or esbuild typically handle this automatically
  2. Import from pre-built dist files - Use the compiled distribution files instead of source files
  3. Upgrade to latest version - Newer versions use static imports and don't have this issue
Other Common Issues Components Not Rendering

If components aren't appearing:

  1. Check CSS imports - Ensure you've imported the theme CSS:

    <link rel="stylesheet" href="path/to/light.theme.css" />

  2. Check JavaScript imports - Ensure the component library is loaded:

    import 'dap-design-system'

  3. Check browser console - Look for JavaScript errors that might prevent component registration

TypeScript Type Errors

If you see TypeScript errors:

  1. Ensure types are installed - The package includes TypeScript definitions
  2. Check tsconfig.json - Ensure moduleResolution is set to "node" or "bundler"
  3. Restart TypeScript server - In VS Code: Cmd+Shift+P → "TypeScript: Restart TS Server"
Styling Issues

If styles aren't applying:

  1. Check CSS import order - Import theme CSS before component CSS
  2. Check CSS specificity - Your custom styles might be overridden
  3. Check CSS variables - Ensure design tokens are properly loaded
Getting Help

If you encounter issues not covered here:

  1. Check the GitHub Issues
  2. Review the API Documentation
  3. Check the Examples for working code samples