These are App.jsx, CodeEditor.jsx and Preview.Jsx codes of my generate and preview react app. The code is being generated fine, so no issues with communicating with the ollama server and generating the code. The preview is not working at all and generating the below errors. Pls suggest any remedies:

Uncaught SyntaxError: /Inline Babel script: 'import' and 'export' may only appear at the top level. (4:12)

  2 |           const rootElement = document.getElementById('root');
  3 |           try {
> 4 |             import React from 'react';
    |             ^
  5 |
  6 | const Hi = () => {
  7 |   return <h1>Hi</h1>;
    at e (parse-error.ts:95:45)
    at r.raise (index.ts:1496:19)
    at r.parseStatementContent (statement.ts:591:16)
    at r.parseStatementLike (statement.ts:437:17)
    at r.parseStatementLike (index.ts:1958:44)
    at r.parseStatementListItem (statement.ts:386:17)
    at r.parseBlockOrModuleBlockBody (statement.ts:1407:16)
    at r.parseBlockBody (statement.ts:1380:10)
    at r.parseBlock (statement.ts:1348:10)
    at r.parseTryStatement (statement.ts:1168:23)
    at r.parseStatementContent (statement.ts:504:21)
    at r.parseStatementLike (statement.ts:437:17)
    at r.parseStatementLike (index.ts:1958:44)
    at r.parseModuleItem (statement.ts:374:17)
    at r.parseBlockOrModuleBlockBody (statement.ts:1406:16)
    at r.parseBlockBody (statement.ts:1380:10)
    at r.parseProgram (statement.ts:225:10)
    at r.parseTopLevel (statement.ts:203:25)
    at r.parseTopLevel (index.ts:3322:43)
    at r.parse (index.ts:47:10)
    at gy (index.ts:66:38)
    at index.ts:28:14
    at u (babel.min.js:1:4312)
    at Generator.<anonymous> (babel.min.js:1:5658)
    at Generator.next (babel.min.js:1:4741)
    at u (babel.min.js:1:4312)
    at A (babel.min.js:1:6088)
    at Generator.<anonymous> (babel.min.js:1:5435)
    at Generator.next (babel.min.js:1:4741)
    at u (babel.min.js:1:4312)
    at A (babel.min.js:1:6088)
    at Generator.<anonymous> (babel.min.js:1:5435)
    at Generator.next (babel.min.js:1:4741)
    at u (babel.min.js:1:4312)
    at A (babel.min.js:1:6088)
    at Generator.<anonymous> (babel.min.js:1:5435)
    at Generator.next (babel.min.js:1:4741)
    at bI (index.js:251:28)
    at sync (index.js:89:14)
    at stopHiding - secret - don't use this - v1 (rewrite-stack-trace.ts:99:16)
    at OF (transform.ts:66:52)
    at Abe (index.ts:158:10)
    at transformScriptTags.ts:50:10
    at mbe (transformScriptTags.ts:103:19)
    at n (transformScriptTags.ts:176:9)
    at bbe (transformScriptTags.ts:222:3)
    at transformScriptTags.ts:258:3
    at Obe (index.ts:244:3)
    at Dbe (index.ts:228:3)Understand this errorAI
client.ts:105 [vite] server connection lost. polli

// src/App.jsx
import React, { useState } from 'react';
import axios from 'axios';
import CodeEditor from './components/CodeEditor';
import Preview from './components/Preview';
import './App.scss';

// Configure axios instance
const api = axios.create({
  baseURL: 'http://localhost:5000',
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// Initial code template
const initialCode = `// Write your React code here
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));`.trim();

function App() {
  const [code, setCode] = useState(initialCode);
  const [prompt, setPrompt] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleCodeChange = (newValue) => {
    if (typeof newValue === 'string') {
      setCode(newValue.trim());
      setError(null);
    }
  };

  const handlePromptChange = (e) => {
    setPrompt(e.target.value);
    setError(null);
  };

  const generateCode = async () => {
    if (!prompt.trim()) {
      setError('Please enter a prompt');
      return;
    }
  
    try {
      setIsLoading(true);
      setError(null);
      
      const response = await api.post('/generateCode', {
        prompt: `Create a React component that ${prompt.trim()}. Return only the code without any explanation.`
      });
  
      console.log('Raw response:', response.data);
  
      if (response.status === 200 && response.data) {
        const generatedCode = response.data.code;
        
        if (typeof generatedCode === 'string') {
          // Clean up the code by removing markdown code blocks if present
          const cleanCode = generatedCode
            .replace(/```(jsx?|typescript|react)?\n/g, '')
            .replace(/```\n?$/g, '')
            .trim();
  
          setCode(cleanCode);
        } else {
          throw new Error('Invalid code format received');
        }
      } else {
        throw new Error('Empty response from server');
      }
  
    } catch (err) {
      console.error('Full error object:', err);
      
      let errorMessage = 'Failed to generate code';
      
      if (err.response) {
        errorMessage = err.response.data?.error || 
                      err.response.data?.message || 
                      `Server error: ${err.response.status}`;
        console.error('Server error details:', err.response.data);
      } else if (err.request) {
        errorMessage = 'No response from server. Please check if the server is running.';
        console.error('No response received:', err.request);
      } else {
        errorMessage = err.message;
        console.error('Request setup error:', err.message);
      }
  
      setError(errorMessage);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !isLoading && prompt.trim()) {
      generateCode();
    }
  };

  return (
    <div className="app-container">
      <div className="control-panel">
        <div className="input-group">
          <input
            type="text"
            value={prompt}
            onChange={handlePromptChange}
            onKeyPress={handleKeyPress}
            placeholder="Describe the React component you want to create..."
            disabled={isLoading}
            className="prompt-input"
          />
          <button 
            onClick={generateCode} 
            disabled={isLoading || !prompt.trim()}
            className={`generate-button ${isLoading ? 'loading' : ''}`}
          >
            {isLoading ? 'Generating...' : 'Generate Code'}
          </button>
        </div>
        
        {error && (
          <div className="error-message" role="alert">
            {error}
          </div>
        )}
      </div>

      <div className="editor-preview-container">
        <div className="editor-container">
          <h2>Code Editor</h2>
          <div className="editor-wrapper">
            <CodeEditor 
              code={code} 
              onChange={handleCodeChange}
            />
          </div>
        </div>
        <div className="preview-container">
          <h2>Preview</h2>
          <div className="preview-wrapper">
            <Preview 
              code={code}
              error={error}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

// src/components/CodeEditor.jsx
import React from 'react';
import Editor from '@monaco-editor/react';

function CodeEditor({ code, onChange }) {
  // Set default value for code
  const defaultCode = `// Write your React code here
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));`;

  // Ensure code is a string
  const editorValue = code || defaultCode;

  return (
    <Editor
      height="100%"
      defaultLanguage="javascript"
      value={editorValue}
      onChange={onChange}
      theme="vs-dark"
      options={{
        minimap: { enabled: false },
        automaticLayout: true,
        scrollBeyondLastLine: false,
        fontSize: 14,
        formatOnPaste: true,
        formatOnType: true,
        wordWrap: 'on',
        tabSize: 2,
        insertSpaces: true,
      }}
    />
  );
}

export default CodeEditor;

// src/components/Preview.jsx
import React, { useRef, useEffect } from 'react';

function Preview({ code }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    // Ensure code is a string and properly formatted
    const safeCode = code?.toString() || '// No code to display';
    
    const htmlContent = `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <style>
          html { background-color: white; }
          body { margin: 0; padding: 16px; }
          #root { min-height: 100vh; }
          .error { 
            color: #dc3545;
            padding: 8px;
            background-color: #ffebee;
            border-radius: 4px;
            margin: 8px 0;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/babel">
          const rootElement = document.getElementById('root');
          try {
            ${safeCode}
          } catch (err) {
            rootElement.innerHTML = '<div class="error"><pre style="margin:0">' + err + '</pre></div>';
            console.error(err);
          }
        </script>
      </body>
      </html>
    `;

    if (iframeRef.current) {
      iframeRef.current.srcdoc = htmlContent;
    }
  }, [code]);

  return (
    <div style={{ height: '100%', border: '1px solid #ddd' }}>
      <iframe
        ref={iframeRef}
        title="preview"
        sandbox="allow-scripts"
        style={{
          width: '100%',
          height: '100%',
          border: 'none',
          borderRadius: '4px',
          backgroundColor: 'white'
        }}
      />
    </div>
  );
}

export default Preview;