Using chat-components with themed application

[quintonn]

I have a react app that uses the cloud scape components and I've added the chat-components.
But since I am creating my own theme, when I run the app, i see errors like this:

Module not found: Error: Can't resolve '@cloudscape-design/design-tokens' in ...\project\node_modules\@cloudscape-design\chat-components\avatar'

I suspect it's related to the section in webpack.config.js, but I can't find any info on this.

This is the section I have in my webpack.config.js:

resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
      alias: {
        "@": resolve(__dirname, "./src/"),
        "@cloudscape-design/components": resolve(
          __dirname,
          "./themed/components"
        ),
        "@cloudscape-design/design-tokens": resolve(
          __dirname,
          "./themed/design-tokens"
        )
      }
    }

I notice there is some scripts for publishing a themeable chat-components library but I guess it's not wired up yet or not publishing.

Any help on this would be much appreciated.

[avinashbot]

The root styles and design tokens are generated as part of the theming build, which should be used by the chat-components library. As far as I can see, the resolve should replace the path with the themed build version of the design tokens. Could you confirm that the folder (themed/design-tokens) contains a valid package.json and index.js?

[quintonn]

yes it does.

Not sure what I did, but this is actually now resolved for me.