cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nijo
Helper I
Helper I

Error while building PCF with react app

Hi,

 

Am creating a PCF control using prime react. the individual react app works fine. But when I call the react file from PFC index file its giving errors associated with CSS files. please find the below error.

 

 

 

RROR in ./PCFReactElementComponent/CSS/theme.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| :root {
|   --primaryColor: #007ad9;
 @ ./PCFReactElementComponent/App.tsx 45:0-26
 @ ./PCFReactElementComponent/index.ts

 

 

 

below is the import section in 

 

 

import './CSS/primereact.min.css';
import './CSS/theme.css';
import './CSS/primeicons.css';
import {DataTable} from 'primereact/datatable';
import {Column} from 'primereact/column';

 

 

Please advise.

Also, has anyone used multiple CSS files in PCF, do we just have to mention all the files in the manifest?

 

Many thanks in advance

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
DianaBirkelbach
Super User
Super User

Hi  @Nijo 

You don't need to import the css files. Just declare them as a resource in your manifest (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/c...)

 

Best regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

RAWilson
Resolver I
Resolver I

There is no need to use the import statement for the css files in your react control.  As long as it's listed in the manifest it will be loaded with the control. They are what is causing your error.  The webpack script used by the pcf-scripts project that actually builds the component doesn't support css processing. This has caused me headaches as I have had to fork certain react controls I'm trying to use for PCF just to remove their css imports that were causing me problems and having to make copies of their css files and include them in my manifest instead.

 

For multiple css files just make sure they are all listed out in the manifest and you should be ok.

 

-Rick

 

 

View solution in original post

2 REPLIES 2
DianaBirkelbach
Super User
Super User

Hi  @Nijo 

You don't need to import the css files. Just declare them as a resource in your manifest (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/c...)

 

Best regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

RAWilson
Resolver I
Resolver I

There is no need to use the import statement for the css files in your react control.  As long as it's listed in the manifest it will be loaded with the control. They are what is causing your error.  The webpack script used by the pcf-scripts project that actually builds the component doesn't support css processing. This has caused me headaches as I have had to fork certain react controls I'm trying to use for PCF just to remove their css imports that were causing me problems and having to make copies of their css files and include them in my manifest instead.

 

For multiple css files just make sure they are all listed out in the manifest and you should be ok.

 

-Rick

 

 

View solution in original post

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (1,593)