microsoft / fluentui-react-native

A react-native component library that implements the Fluent Design System.
https://developer.microsoft.com/fluentui
MIT License
1.28k stars 163 forks source link

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

Open jbizcloud opened 2 years ago

jbizcloud commented 2 years ago

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

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 (

****

); }


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 commented 2 years ago

pragma and pragmaFrag cannot be set when runtime is automatic.

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

Myzel394 commented 2 years ago

Is there any solution available?

rurikoaraki commented 2 years ago

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 commented 1 year ago

Note in latest versions of RN, the metro-babel-react-native preset was modified to always pass runtime:automatic. (https://github.com/facebook/metro/pull/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 commented 1 year ago

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', }]]