Answered

Error while building PCF with react app

(0) Share

Report

Posted on by Nijos

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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (2)

Sort by

Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on at

Like
a
(2)

Report
Copy link

Link copied!

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/css)

Best regards,
Diana

Was this reply helpful? Yes No
Verified answer

Rick Wilson 160 on at

Like
a
(2)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No