# Multiple chunks emit assets to the same filename RadComponents.js (chunks RadComponents and styles)

**URL:** <https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690>\
**Category:** Module Development\
**Tags:** ignition81, perspective, scripting\
**Created:** [February 21, 2025, 12:26pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690 "2025-02-21T12:26:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hrushikesh.hd1](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hrushikesh.hd1](https://forum.inductiveautomation.com/u/hrushikesh.hd1)\
**Post date:** [February 21, 2025, 12:26pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/1 "2025-02-21T12:26:19Z")

</div>

I have created a new component called "Dropdown.tsx" by referring to the ignition sdk-examples. However I am getting **Conflict: Multiple chunks emit assets to the same filename RadComponents.js (chunks RadComponents and styles).** error when I try to import the css for the prime react component I am using. The error goes away if I remove the theme css import, but my dropdown won't be styled. Can someone please help me applying the css for the prime react dropdown component. Below is my Dropdown.tsx code

```python
import * as React from 'react';
import {
   Component,
   ComponentMeta,
   ComponentProps,
   PComponent,
   PropertyTree,
   SizeObject
} from '@inductiveautomation/perspective-client';
import { bind } from 'bind-decorator';
import { Dropdown as PrimeDropdown, DropdownChangeEvent } from 'primereact/dropdown';
import 'primereact/resources/themes/lara-light-indigo/theme';

export const COMPONENT_TYPE = "rad.display.dropdown";

interface DropdownProps {
   placeholder: string;
   options: Array<{ name: string, code: string }>;
}

export class Dropdown extends Component<ComponentProps<DropdownProps>, { selectedOption: any }> {
    state = {
        selectedOption: ''
    };
 
    @bind
    onOptionChange(e: DropdownChangeEvent) {
        this.setState({ selectedOption: e.value });
    }
 
    @bind
    render() {
        const { props, emit } = this.props;
 
        return (
            
            <div {...emit({classes: ["myDropdownContainer"]})}>
                <PrimeDropdown
                    value={this.state.selectedOption}
                    onChange={this.onOptionChange}
                    options={props.options}
                    optionLabel="name"
                    placeholder="Select Any Option"
                />
            </div>

        );
    }
}

export class DropdownMeta implements ComponentMeta {

   getComponentType(): string {
       return COMPONENT_TYPE;
   }

   getViewComponent(): PComponent {
       return Dropdown;
   }

   getDefaultSize(): SizeObject {
       return ({
           width: 300,
           height: 300
       });
   }

   getPropsReducer(tree: PropertyTree): DropdownProps {
       return {
           placeholder: tree.read("placeholder", "Select a City"),
           options: tree.read("options", [])
       };
   }
}

```

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 21, 2025, 4:43pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/2 "2025-02-21T16:43:19Z")

</div>

try instead importing it in the `client-components.ts` file at the top level. I had the same problem and this is how it resolved it for me.

I am not 100% but I think it is due to the way that webpack is trying to generate the JavaScript to fit the way perspective is rendered.

---

<div class="post-metadata">

**Author:** ![hrushikesh.hd1](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hrushikesh.hd1](https://forum.inductiveautomation.com/u/hrushikesh.hd1)\
**Post date:** [February 21, 2025, 6:31pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/3 "2025-02-21T18:31:49Z")

</div>

That makes the error disappear, but the dropdown will not be styled. Since I know how the component looks with and without the primereact theme. I can see in designer, the component looks exactly like not styled.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 21, 2025, 7:53pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/4 "2025-02-21T19:53:53Z")

</div>

how does your `client-components.ts` look?

---

<div class="post-metadata">

**Author:** ![hrushikesh.hd1](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hrushikesh.hd1](https://forum.inductiveautomation.com/u/hrushikesh.hd1)\
**Post date:** [February 21, 2025, 8:18pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/5 "2025-02-21T20:18:30Z")

</div>

```python
import {ComponentMeta, ComponentRegistry} from '@inductiveautomation/perspective-client';
import { Image, ImageMeta } from './components/Image';
import { MessengerComponent, MessengerComponentMeta } from './components/Messenger';
import { TagCounter, TagCounterMeta } from './components/TagCounter';
import { Dropdown, DropdownMeta } from './components/Dropdown';

// export so the components are referencable, e.g. `RadComponents['Image']
export {Image, MessengerComponent, TagCounter, Dropdown};

import '../scss/main';
import 'primeicons/primeicons';
import 'primeflex/primeflex';
import 'primereact/resources/primereact';
import 'primereact/resources/themes/lara-light-indigo/theme';

// as new components are implemented, import them, and add their meta to this array
const components: Array<ComponentMeta> = [
    new ImageMeta(),
    new MessengerComponentMeta(),
    new TagCounterMeta(),
    new DropdownMeta()
];

// iterate through our components, registering each one with the registry. Don't forget to register on the Java side too!
components.forEach((c: ComponentMeta) => ComponentRegistry.register(c) );

```

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 21, 2025, 8:20pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/6 "2025-02-21T20:20:47Z")

</div>

I am assuming you have installed the dependency via yarn?

---

<div class="post-metadata">

**Author:** ![hrushikesh.hd1](https://avatars.discourse-cdn.com/v4/letter/h/dfb087/32.png) [@hrushikesh.hd1](https://forum.inductiveautomation.com/u/hrushikesh.hd1)\
**Post date:** [February 21, 2025, 8:31pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/7 "2025-02-21T20:31:53Z")

</div>

No, `npm install primereact`. Also what difference does it make??

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 21, 2025, 8:46pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/8 "2025-02-21T20:46:40Z")

</div>

I used npm and ran into problems so I moved to yarn (This could have been a non issue I just saw it started working once I was using yarn)

I am not sure what else to do here. I am not familiar with `primereact` unfortunately.

Only other thing I can think of is your webpack isn't putting that in with the rest of the css properly.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [February 22, 2025, 3:46pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/9 "2025-02-22T15:46:02Z")

</div>

> [@Benjamin\_Furlani](#):
>
> I used npm and ran into problems so I moved to yarn (This could have been a non issue I just saw it started working once I was using yarn)

IA has issues with their published packages that NPM can't handle. The only sane way to consume them is with Yarn.

It doesn't sound like it's an issue here though.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 22, 2025, 9:43pm UTC](https://forum.inductiveautomation.com/t/multiple-chunks-emit-assets-to-the-same-filename-radcomponents-js-chunks-radcomponents-and-styles/102690/10 "2025-02-22T21:43:28Z")

</div>

My reason for bringing it up was because if you use npm and the packages overall aren't what it wants the styles might not be resolving properly when the built happens.

This is pretty much the issue I had.