React App will not load

billyjacoby commented 4 years ago

Describe the bug A super simple React app does not load as a widget.

To Reproduce Steps to reproduce the behavior:

create-react-app does not load at all on the homescreen or lock screen.

Expected behavior The elements to load.

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

Device: iPhone 11 Pro Max
OS: iOS 13.5

Additional context The wiki mentions that React or Vue apps should be able to run, but no further direction is given. Building a dead simple app from create-react-app will not run on the device. Wondering if there is a certain polypill or something that must be added.

Thanks!

Matchstic commented 4 years ago

So far, I’ve tested that Vue runs fine but haven’t tried React myself.

You can get further info by enabling “redirect console.log to filesystem”, in Settings > Xen HTML > Support > Developer Options.

I’ll also need that to understand what’s going on.

billyjacoby commented 4 years ago

Perfect, I'll do that right now. Where do these logs get written to?

Edit: nvm it says it in the setting... lol

billyjacoby commented 4 years ago

I'm not seeing anything in the logs at all.

Matchstic commented 4 years ago

You did respring, right?

billyjacoby commented 4 years ago

Yeah, multiple times actually.

Matchstic commented 4 years ago

Hmm. If you still can't get logs, leave it with me and I'll look further into it when I can. This will be looked at before 2.0 leaves beta.

billyjacoby commented 4 years ago

Yeah, i just tried a few more times then tested the logs in an HTML only widget and they worked there.

If there's anything else i can do to help please let me know!

billyjacoby commented 4 years ago

When connected to Console on my mac the only thing that i see that happens after i try to add the widget to the screen is:

Xen HTML (WebGL) :: (WebGL.xm:83) DEBUG :: initialising hooks Xen HTML :: (XENHTouchForwardingRecognizer.m:170) Not forwarding touch; touchView is not SBRootIconListView (is SBHEditingDoneButton)

Matchstic commented 4 years ago

If you filter for "WebKit", do you get any further info? On 26 May 2020, 20:50 +0100, Billy Jacoby notifications@github.com, wrote:

When connected to Console on my mac the only thing that i see that happens after i try to add the widget to the screen is: Xen HTML (WebGL) :: (WebGL.xm:83) DEBUG :: initialising hooks Xen HTML :: (XENHTouchForwardingRecognizer.m:170) Not forwarding touch; touchView is not SBRootIconListView (is SBHEditingDoneButton) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

billyjacoby commented 4 years ago

Oh yeah, i get a whole bunch of logs then. The errors are:

ExtensionLoader: Safemode parent directory <private> is blocked by sandbox. ExtensionLoader: Safemode parent directory <private> is blocked by sandbox. ExtensionLoader: Injection of <private> failed: '(null)'

billyjacoby commented 4 years ago

Okay so it looks like it isn't necessarily a problem with React, but probably more specifically something that happens during the build step of create-react-app.

Running the following code snippet will work:


<html>
    <head>
        <title>React Hello World</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script>
            window.onload = function()
            {
                class Greetings extends React.Component
                {
                    render()
                    {
                        return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');
                    }
                }

                ReactDOM.render(
                    React.createElement(Greetings, { name : 'Chris' }),
                    document.getElementById('root')
                );
            };
        </script>
    </body>
</html>

billyjacoby commented 4 years ago

It seems its an issue with create-react-app's bundling. I've created a super minimal build config for react and i have it working now.

My plan is to build a sort of template that other react developers would be able to pickup and run with to build any widgets they can think of. I'm open to suggestions on how to properly do this!

Matchstic / Xen-HTML

React App will not load #252