feat(pack): support config.react.importSource

crates/pack-core/src/client/context.rs

@@ -278,15 +278,9 @@ pub async fn get_client_module_options_context(
     } else {
         false
     };
-    let jsx_transform_options = get_jsx_transform_options(
-        project_path.clone(),
-        mode,
-        false,
-        config,
-        enable_react_refresh,
-    )
-    .to_resolved()
-    .await?;
+    let jsx_transform_options = get_jsx_transform_options(mode, config, enable_react_refresh)
+        .to_resolved()
+        .await?;
 
     let mut loader_conditions = BTreeSet::new();
     loader_conditions.insert(WebpackLoaderBuiltinCondition::Browser);

crates/pack-core/src/config.rs

@@ -249,11 +249,21 @@ pub enum ReactRuntime {
     Classic,
 }
 
+impl ReactRuntime {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ReactRuntime::Automatic => "automatic",
+            ReactRuntime::Classic => "classic",
+        }
+    }
+}
+
 #[turbo_tasks::value(eq = "manual")]
 #[derive(Clone, Debug, PartialEq, Default, Deserialize, OperationValue)]
 #[serde(rename_all = "camelCase")]
 pub struct ReactConfig {
     pub runtime: Option<ReactRuntime>,
+    pub import_source: Option<RcStr>,
 }
 
 #[turbo_tasks::value(eq = "manual")]

crates/pack-core/src/transform_options.rs

@@ -11,10 +11,7 @@ use turbopack_core::{
 };
 use turbopack_ecmascript::typescript::resolve::{read_from_tsconfigs, read_tsconfigs, tsconfig};
 
-use crate::{
-    config::{Config, ReactRuntime},
-    mode::Mode,
-};
+use crate::{config::Config, mode::Mode};
 
 async fn get_typescript_options(
     project_path: FileSystemPath,
@@ -117,52 +114,22 @@ pub async fn get_decorators_transform_options(
 
 #[turbo_tasks::function]
 pub async fn get_jsx_transform_options(
-    project_path: FileSystemPath,
     mode: Vc<Mode>,
-    is_rsc_context: bool,
     config: Vc<Config>,
     enable_react_refresh: bool,
 ) -> Result<Vc<JsxTransformOptions>> {
-    let tsconfig = get_typescript_options(project_path.clone()).await?;
-    let is_emotion_enabled = config.styles().await?.emotion.is_some();
     let react_config = config.react().await?;
 
     let react_transform_options = JsxTransformOptions {
         development: mode.await?.is_react_development(),
-        // https://github.com/vercel/next.js/blob/3dc2c1c7f8441cdee31da9f7e0986d654c7fd2e7/packages/next/src/build/swc/options.ts#L112
-        // This'll be ignored if ts|jsconfig explicitly specifies importSource
-        import_source: if is_emotion_enabled && !is_rsc_context {
-            Some("@emotion/react".into())
-        } else {
-            None
-        },
-        runtime: react_config.runtime.as_ref().map(|runtime| match runtime {
-            ReactRuntime::Automatic => "automatic".into(),
-            ReactRuntime::Classic => "classic".into(),
-        }),
+        import_source: react_config.import_source.clone().or(Some("react".into())),
+        runtime: react_config
+            .runtime
+            .as_ref()
+            .map(|r| r.as_str().into())
+            .or(Some("automatic".into())),
         react_refresh: enable_react_refresh,
     };
 
-    let react_transform_options = if let Some(tsconfig) = tsconfig {
-        read_from_tsconfigs(&tsconfig, |json, _| {
-            let jsx_import_source = json["compilerOptions"]["jsxImportSource"]
-                .as_str()
-                .map(|s| s.into());
-
-            Some(JsxTransformOptions {
-                import_source: if jsx_import_source.is_some() {
-                    jsx_import_source
-                } else {
-                    react_transform_options.import_source.clone()
-                },
-                ..react_transform_options.clone()
-            })
-        })
-        .await?
-        .unwrap_or_default()
-    } else {
-        react_transform_options
-    };
-
     Ok(react_transform_options.cell())
 }

crates/pack-tests/tests/snapshot/basic/foreign_jsx_transform/config.json

@@ -2,7 +2,7 @@
     "config": {
         "entry": [
             {
-                "import": "input/index.js",
+                "import": "input/index.jsx",
                 "name": "main"
             }
         ],

crates/pack-tests/tests/snapshot/basic/foreign_jsx_transform/input/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import 'foreign-jsx-transform';
+
+const App = () => {
+    return <div></div>
+}
+
+export default App;

crates/pack-tests/tests/snapshot/basic/foreign_jsx_transform/issues/Export-default-doesn-t-exist-in-target-module-421f54.txt

@@ -0,0 +1,20 @@
+warning - [bindings] /basic/foreign_jsx_transform/input/index.jsx:1:0  Export default doesn't exist in target module
+
+         + v------------------------v
+       1 + import React from 'react';
+         + ^------------------------^
+       2 | import 'foreign-jsx-transform';
+       3 | 
+       4 | const App = () => {
+       5 |     return <div></div>
+
+  The export default was not found in module [project]/node_modules/react/index.js [client] (ecmascript).
+
+  Did you mean to import jsx?
+
+  All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.
+
+
+  | These are the exports of the module:
+  | jsx
+  |

crates/pack-tests/tests/snapshot/basic/foreign_jsx_transform/output/main.js

@@ -1,5 +1,5 @@
 (globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([
     typeof document === "object" ? document.currentScript : undefined,
-    {"otherChunks":["_project__basic_foreign_jsx_transform_9ec7bd5f.js"],"runtimeModuleIds":[46]}
+    {"otherChunks":["_project___e660a1cd.js"],"runtimeModuleIds":[97]}
 ]);
 // Dummy runtime

packages/pack-shared/src/config.ts

@@ -191,6 +191,7 @@ export interface ConfigComplete {
   };
   react?: {
     runtime?: "automatic" | "classic";
+    importSource?: string;
   };
   stats?: boolean;
   persistentCaching?: boolean;