[Bug]: PCF build error pragma and pragmaFrag cannot be set when runtime is automatic.

[MaTeMaTuK]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 2.12 GB / 15.39 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.76)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

None

Reproduction

Create PCF component and install latest @fluentui/react-components, build

Bug Description

Library requires the latest React version and it conflicts with current PCF for D365 setup. Can you help with harmonization from here ?

Actual Behavior

\node_modules@fluentui\react-tree\lib\components\Tree\renderTree.js: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | /** @jsxRuntime automatic / /* @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
| ^
2 | import { assertSlots } from '@fluentui/react-utilities';
3 | import { TreeProvider } from '../../contexts';
4 | export const renderTree_unstable = (state, contextValues)=>{;

Expected Behavior

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Are you compiling Fluent sources? I.e. is there a babel-loader or something that is triggered on node_modules/@fluentui/**?

Can you please provide a minimal reproduction case? On Stackblitz or a Github repo.

[MaTeMaTuK]

Hi @layershifter,
I have prepared example

[anitu]

I had the same issue. The pcf-scripts package replaced esbuild-loader with babel-loader in 1.26.5. I downgraded the package to 1.20.3 and the build was successful. Hope this helps.

[MissyM]

Hi @MaTeMaTuK. I solved it by extending the Webpack configuration.
In a webpack.config.js file, in the root of the project, add:

module.exports = { module: { rules: [ { test: /\.(js|ts|tsx)$/, loader: 'string-replace-loader', options: { search: '/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */', replace: '', } } ] } }
I took this idea to extend the Webpack from here

[MaTeMaTuK]

Hi @MissyM, Thank you for your help but I have the same error with this change

Thanks @anitu, your option is working!

[layershifter]

Hi @layershifter,
I have prepared example

@MaTeMaTuK thanks for providing the example. In your case, babel-loader runs with @babel/preset-react on node_modules. TBH I don't think that it's correct config for Webpack, but anyway these comments should be stripped out on your side.

A simpler repro on Stackblitz: https://stackblitz.com/edit/stackblitz-starters-qn6rv5

[layershifter]

The release just came to NPM, comments causing problems are no longer present 🐱