Modify webpack/metro to get visualisations working on the web

[BenjaminWatts]

At present there is no animation in the web version of the app - which builds using netlify to the domain https://gb.kilowatts.io.

In order to get it to work - webpack/metro need to be setup following the guidance here skia and here reanimated

I've tried/failed a few times myself - but I'm no webpack expert.

Health warning - I'm really not sure what the performance in a browser is likely to be - and the tone of some of the guidance around Skia suggests that - because it doesn't have as easy access to the GPU as on a mobile device that it might be worse. Should this be the case - there would be ways to tone down the animations - potentially just on web, in order to get it to fly. Please discuss

[xjamundx]

Not having a ton of time, but may be able to look at this over the weekend!

[BenjaminWatts]

Hey @xjamundx -- did you have any pointers on this - I was hoping to give it a try in the coming days.

[xjamundx]

I’ll be able to take a look this afternoon

On Sat, 17 Feb 2024 at 8:50 am, Ben Watts @.***> wrote:

Hey @xjamundx https://github.com/xjamundx -- did you have any pointers on this - I was hoping to give it a try in the coming days.

— Reply to this email directly, view it on GitHub https://github.com/kilowatts-io/kilowatts-grid/issues/151#issuecomment-1949905190, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB4C76ETHHV3RELFSO46UTYUBVMJAVCNFSM6AAAAABC5SOQOWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBZHEYDKMJZGA . You are receiving this because you were mentioned.Message ID: @.***>

[xjamundx]

Messing with the suggestions here: https://github.com/Shopify/react-native-skia/issues/1448#issuecomment-1537467040

Basically applying these settings:

  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },

And also wrapping the svg stuff in this compoennt:

        <WithSkiaWeb
          getComponent={() => import("./svg-map/svg-map")}
          fallback={<span>Loading Skia...</span>}
        />

Not any luck yet, but seems the right direction

[xjamundx]

Now getting this

error:

Some hints on this here: https://github.com/Shopify/react-native-skia/issues/940

[BenjaminWatts]

I'm getting Sentry alerts including with that error message. 😊

I worked my way around those instructions a few weeks ago and didn't manage to get it to work - very much open minded to deploying it differently e.g with Next and server rendering if that makes the rest of it easier.

I also get the impression that webpack is on the way out in the react native web world - to be replaced by metro.

Any suggestions or just notes on what seems likely to work would be helpful!

[BenjaminWatts]

I should have learnt webpack a long time ago!

[xjamundx]

Yeah I don't think we're actually using webpack at the moment. It appears to be using metro only. And I think that's part of the challenge. Most of the docs show you how to do polyfills/aliasing for webpack, but not for metro. I'm still toying with it and will let you know what I manage to make happen.

[xjamundx]

Looks like yarn setup-skia-web may be copying it into the wrong place. Trying cp web/static/js/canvaskit.wasm assets/

[xjamundx]

After doing that we need to tell it the new path:

 <WithSkiaWeb
          getComponent={async () => {
            const SvgMap = await import("./svg-map/svg-map");
            return { default: <SvgMap refetch={refetch} /> };
          }}
          opts={{
            locateFile: () => "http://localhost:8081/assets/canvaskit.wasm",
          }}
          fallback={<span>Loading Skia...</span>}
        />

And we get a new error:

Requiring unknown module "1407". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.

This might be something to do with the way I'm lazy-loading the SVG Map thing. Will poke some morel.

[BenjaminWatts]

I see you're still throwing Sentry errors - do you reckon it's doable or probably not?

[xjamundx]

Yeah so I can get around this issue, but then I come into the Matrix issue. I think fundamentally I'm having trouble with metro support lazy-loading of modules.

Need to head out for a bit with the family, can poke at this more tomorrow.

Also downgrading to expo 48 I think (with webpack) would likely be a solution, but I'm happy to keep poking at this.

[BenjaminWatts]

Thanks so much - that's something I hadn't considered. I feel like satisfying the dependency of requirements of skia and react-native-reanimated along with expo/react-native-web is easier said than done - though I think firms like Airbnb do it in production.

I know that expo imposes quite strict dependency requirements on react native modules for mobile, and I think some of the hooks I've used (useClock rings a bell) I think are quite recent additions - putting together I suspect that moving back as far as Expo 48 might break the mobile app (but I'm not sure).

Thanks again!

[xjamundx]

Made some great progress today, by switching the bundler to webpack config in app.json in the web section. Will share more in a bit if I actually get it to work.

[xjamundx]

It's buggy as anything, but it is kind of working....

I'll share my code changes soon.