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

Module Development
, ,
1

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

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", [])
       };
   }
}
2

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.

3

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.

4

how does your client-components.ts look?

5 
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) );
6

I am assuming you have installed the dependency via yarn?

7

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

8

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.