FluentUI in Expo project, pragma and pragmaFrag cannot be set when runtime is automatic

[jbizcloud]

Willing to submit a PR to fix?

• I am willing to submit a PR to fix

Requested priority

Normal

Products/applications affected

FluentUI not able to render in Expo project.

Started Metro Bundler
iOS Bundling failed 3058ms
node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: D:\rep\ExpoLab\JSlab\ExpoLab\node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __assign = (this && this.__assign) || function () {
  3 |     __assign = Object.assign || function(t) {
  4 |         for (var s, i = 1, n = arguments.length; i < n; i++) {
SyntaxError: D:\rep\ExpoLab\JSlab\ExpoLab\node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: pragma and pragmaFrag cannot be set when runtime is automatic.

Package version(s)

"@fluentui/react-native": "^0.31.5",

OS version(s)

Windows 11, MacOS Monterey

Platform

• iOS
• macOS
• win32
• windows
• android

Xcode version

14

Please provide a reproduction of the bug

1. Instal Expo
   https://docs.expo.dev/get-started/installation/

2. Create new React Native app
   npx create-expo-app my-app

3. Install Fluent UI
   npm i @fluentui/react-native

4. Add Checkbox to App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, Entry } from 'react-native';
**import { Checkbox } from '@fluentui/react-native';**

export default function App() {
  return (
    <View >
          
      **<Checkbox label="Hello World Checkbox" />**

      <StatusBar style="auto" />
    </View>
  );
}

5. Start project:
   npm start

6. Error in terminal

Started Metro Bundler
iOS Bundling failed 3058ms
node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: D:\rep\ExpoLab\JSlab\ExpoLab\node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __assign = (this && this.__assign) || function () {
  3 |     __assign = Object.assign || function(t) {
  4 |         for (var s, i = 1, n = arguments.length; i < n; i++) {
SyntaxError: D:\rep\ExpoLab\JSlab\ExpoLab\node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: pragma and pragmaFrag cannot be set when runtime is automatic.

Actual behavior

App error message

Expected behavior

App should display the added Checkbox

[Saadnajmi]

pragma and pragmaFrag cannot be set when runtime is automatic.

This makes me wonder if this is because of our useSlots pragma..

[Myzel394]

Is there any solution available?

[rurikoaraki]

We're tracking this work but it's not high on the priority list. Based on some other pages, you may be able to work around this by switching to classic runtime: https://babeljs.io/docs/en/babel-preset-react/#with-a-configuration-file-recommended

[acoates-ms]

Note in latest versions of RN, the metro-babel-react-native preset was modified to always pass runtime:automatic. (facebook/metro#848)

So generally to get past this error you should use the useTransformReactJSXExperimental flag:

Ex:

  module.exports = {
      presets: [['@rnx-kit/babel-preset-metro-react-native', {useTransformReactJSXExperimental:true}]],
      plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]]
    };

[MP-msft]

I ran into the same issue in a blank RN app created with Expo, which by default also uses "automatic" runtime.

Here is how to change it to "classic" to temporarily mitigate the issue if the app is created through Expo:
https://www.npmjs.com/package/babel-preset-expo

presets: [['babel-preset-expo', { jsxRuntime: 'classic', }]]