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
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (2,968)