cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Skilled Sharer
Skilled Sharer

Re: Error while building PCF with react app

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

View solution in original post

Highlighted
Resolver I
Resolver I

Re: Error while building PCF with react app

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
Highlighted
Skilled Sharer
Skilled Sharer

Re: Error while building PCF with react app

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

View solution in original post

Highlighted
Resolver I
Resolver I

Re: Error while building PCF with react app

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
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Robotic Process Automation

Let's talk about the solution provided by Microsoft for Robotic Process Automation (RPA)

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

Users online (8,165)