fix: remix warnings

packages/compiler/plugin.ts

@@ -18,13 +18,20 @@ interface CompilerOutput {
   map: BabelFileResult['map'];
 }
 
+let ssr = false
+
 async function compile(
   id: string,
   code: string,
   options: Options,
   telemetryInstance: MillionTelemetry,
   isServer?: boolean,
 ): Promise<CompilerOutput> {
+  if (isServer) {
+    // for frameworks like remix, even for client, we need to return react-server
+    ssr = true
+  }
+
   displayIntro(options);
 
   const plugins: ParserOptions['plugins'] = [
@@ -52,7 +59,7 @@ async function compile(
         {
           telemetry: telemetryInstance,
           log: options.log,
-          server: isServer,
+          server: ssr,
           hmr: options.hmr,
           auto: options.auto,
           rsc: options.rsc,

packages/react-server/index.ts

@@ -16,6 +16,7 @@ import type {
   MillionProps,
   Options,
 } from '../types';
+import { renderReactScope } from '../react/utils';
 
 let globalInfo;
 
@@ -136,8 +137,8 @@ export const importSource = (callback: () => void) => {
 
       callback();
     })
-    .catch(() => {
-      throw new Error('Failed to load Million.js');
+    .catch((e) => {
+      throw new Error('Failed to load Million.js: ' + e);
     });
 };
 
@@ -213,25 +214,25 @@ export function compiledBlock(
     portals && portalCount > 0
       ? (props: MillionProps) => {
           const [current] = useState<MillionPortal[]>(() => []);
-          // const [firstRender, setFirstRender] = useState(true)
+          const [firstRender, setFirstRender] = useState(true)
 
           const derived = { ...props };
 
           for (let i = 0; i < portalCount; i++) {
-            // const index = portals[i]!;
-            // derived[index] = renderReactScope(
-            //   derived[index] as JSX.Element,
-            //   false,
-            //   current,
-            //   i,
-            // );
+            const index = portals[i]!;
+            derived[index] = renderReactScope(
+              derived[index] as JSX.Element,
+              false,
+              current,
+              i,
+            );
           }
           const [targets] = useState<ReactPortal[]>([]);
 
-          // useEffect(() => {
-          //   // showing targets for the first render causes hydration error!
-          //   // setFirstRender(false)
-          // })
+          useEffect(() => {
+            // showing targets for the first render causes hydration error!
+            setFirstRender(false)
+          })
           for (let i = 0, len = current.length; i < len; i++) {
             targets[i] = current[i]!.portal;
           }
@@ -241,7 +242,7 @@ export function compiledBlock(
             {},
             createElement(RenderBlock, derived),
             // TODO: This should be uncommented, but doing that, value.reset would fail as it is undefined. This should be revisited
-            // !firstRender ? targets : undefined,
+            !firstRender ? targets : undefined,
           );
         }
       : (props: MillionProps) => createElement(RenderBlock, props);

website/pages/docs/install.en-US.mdx

@@ -344,6 +344,9 @@ export default {
 };
 ```
 </Tab>
+<Callout type="warning">
+  The compiler will only try compiling `.jsx` or `.tsx` files and will not try doing any transformation to any other file. You either convert your file formats to those formats or use the [Manual Mode](/docs/manual-mode/manual-mode). 
+</Callout>
 
 </Tabs>