microsoft / fluentui-react-native

A react-native component library that implements the Fluent Design System.

Home Page:https://developer.microsoft.com/fluentui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

importSource cannot be set when runtime is classic. Using Expo Blank Typescript template

trydalch opened this issue · comments

Willing to submit a PR to fix?

  • I am willing to submit a PR to fix

Requested priority

Normal

Products/applications affected

No response

Package version(s)

npm 10.2.0

OS version(s)

Windows 11

Platform

  • iOS
  • macOS
  • win32
  • windows
  • android

Xcode version

No response

Please provide a reproduction of the bug

In a new project created using expo, I get get this error at bundle time when I've added the checkbox to my App.tsx.

Steps to reproduce:

npx create-react-app --template

Select Blank (Typescript)

npm i @fluentui/react-native

Then add the Checkbox:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <Checkbox label="Hello world checkbox" />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Error in the console:

iOS Bundling failed 3487ms
error: node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: C:\Users\Trevor...\...\node_modules\@fluentui-react-native\button\lib-commonjs\deprecated\Button.js: importSource cannot be set when runtime is classic.
> 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++) {

Oddly enough, I had just left the default babel.config.js, which didn't specify a compiler option. I tried setting it to automatic explicitly (because the error message led me to believe it had defaulted to classic). Got the same error. Setting it to classic made this error go away (which is the opposite of what I'd expect with the message).

I then found this related issue and got the checkbox rendered and the app bundled, but now I'm wondering if I'm going to have issues when I go to build a release version of the app: #2613

What's the best workaround for this?

Actual behavior

Unable to bundle and use the components.

Expected behavior

Bundling succeeds and it's actually usable with expo.

Another similar issue, though it complains about the runtime being set to automatic: #1891.