When I execute this python code the preview file is created and opens in a browser but it isn't showing any preview and I see the following errors in the console:

Inline Babel script:2 Uncaught TypeError: Cannot read properties of undefined (reading 'LiveProvider')
    at <anonymous>:4:36
    at mbe (transformScriptTags.ts:104:10)
    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
content.js:7 Content script loaded

import http.server
import socketserver
import webbrowser
import threading
import time
import logging
import json
from typing import Optional

class ReactLivePreviewTester:
    def __init__(self, port: int = 8000):
        self.port = port
        self.setup_logging()
        self.server = None
        self.server_thread = None

    def setup_logging(self):
        logging.basicConfig(
            level=logging.INFO,
            format='%(asctime)s - %(levelname)s - %(message)s'
        )
        self.logger = logging.getLogger(__name__)

    def generate_preview_html(self, code: str) -> str:
        escaped_code = json.dumps(code)
        return f"""
    <!DOCTYPE html>
    <html>
    <head>
        <title>React Live Preview</title>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="https://unpkg.com/react-live@2.4.1/dist/react-live.development.js"></script>
        <style>
            .preview-container {{
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                padding: 20px;
            }}
            .editor {{
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 10px;
            }}
            .preview {{
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 10px;
            }}
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            const {{ LiveProvider, LiveEditor, LiveError, LivePreview }} = window.ReactLive;

            function Preview() {{
                return (
                    <LiveProvider 
                        code={escaped_code}
                        noInline={{true}}
                    >
                        <div className="preview-container">
                            <div className="editor">
                                <LiveEditor />
                                <LiveError />
                            </div>
                            <div className="preview">
                                <LivePreview />
                            </div>
                        </div>
                    </LiveProvider>
                );
            }}

            ReactDOM.render(
                <Preview />,
                document.getElementById('root')
            );
        </script>
    </body>
    </html>
    """

    def save_preview_file(self, code: str, filename: str = "preview.html") -> bool:
        try:
            with open(filename, 'w', encoding='utf-8') as f:
                f.write(self.generate_preview_html(code))
            self.logger.info(f"Preview file saved as {filename}")
            return True  # Python boolean True
        except Exception as e:
            self.logger.error(f"Error saving preview file: {e}")
            return False  # Python boolean False

    def start_server(self):
        Handler = http.server.SimpleHTTPRequestHandler
        try:
            self.server = socketserver.TCPServer(("", self.port), Handler)
            self.server_thread = threading.Thread(target=self.server.serve_forever)
            self.server_thread.daemon = True  # Python boolean True
            self.server_thread.start()
            self.logger.info(f"Server started at http://localhost:{self.port}")
            return True
        except Exception as e:
            self.logger.error(f"Error starting server: {e}")
            return False

    def serve_and_preview(self, code: str, filename: str = "preview.html"):
        if self.save_preview_file(code, filename):
            try:
                if self.start_server():
                    time.sleep(1)
                    webbrowser.open(f'http://localhost:{self.port}/{filename}')
                    print("\nPress Ctrl+C to stop the server...")
                    while True:  # Python boolean True
                        time.sleep(1)
            except KeyboardInterrupt:
                print("\nShutting down server...")
                if self.server:
                    self.server.shutdown()
                    self.server.server_close()
                    print("Server stopped")

def main():
    react_code = """
function HelloWorld() {
    const [count, setCount] = React.useState(0);
    
    return (
        <div style={{ padding: '20px', background: '#f0f0f0' }}>
            <h1>Hello, World!</h1>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

render(<HelloWorld />);
"""
    preview = ReactLivePreviewTester()
    preview.serve_and_preview(react_code)

if __name__ == "__main__":
    main()