SSR Loadable example

[7rulnik]

I tried to lunch it but no luck.

With target async-node I'm getting TypeError: Cannot read property 'call' of undefined on the server side. But node it works.

There are some problems with rehydration, but I believe it's because of wrong stats.
I think it's a good idea to try async-node in a different project without module federation.

UPD: changed target to async-node in this example https://github.com/gregberge/loadable-components/tree/master/examples/server-side-rendering and everything is alright.

[7rulnik]

Yep, the remote is here. It works with bootstrap import in the host and normal entry in remote so I will leave it like that. Why is it good to use bootstrap though?

With this setup I'm getting 2 chunks via jsonp:

197 contains website1/src/bootstrap.js
522 contains website2/src/components/SomeComponent.js

So they are necessary parts. Main question: how to predict that these chunks will be needed on client?

Loadable uses namedChunkGroups and assets from stats. This is stats file for website1 (see comment):

"namedChunkGroups": {
    "main": {
      "name": "main",
      "chunks": [
        179
      ],
      "assets": [
        "main.1d6d0191b0eb01a2689e.js"
        /* I belive there should be 197.dd5598a4dea5d61081a6.js*/
      ],
      "auxiliaryAssets": [
        "main.1d6d0191b0eb01a2689e.js.map"
      ],
      "children": {},
      "childAssets": {},
      "isOverSizeLimit": false
    },
    "Async": {
      "name": "Async",
      "chunks": [
        648
      ],
      "assets": [
        "Async.708b8060e1f55bbe4db0.js"
      ],
      "auxiliaryAssets": [
        "Async.708b8060e1f55bbe4db0.js.map"
      ],
      "children": {},
      "childAssets": {},
      "isOverSizeLimit": false
    }
  }

[ScriptedAlchemy]

You’d need to federate the loadable stats as well so the host is aware

[7rulnik]

But I'm already doing it https://github.com/module-federation/module-federation-examples/pull/19/files#diff-6ea55ab73968e6a2483ffca63cd90c1bR62

[ScriptedAlchemy]

I’ll take a look :)

[7rulnik]

BTW I figured out why async-node breaks with loadable components. It works with chunks in sync way.
https://github.com/gregberge/loadable-components/blob/338bf555adc68986b12c8dd4e304875425119ca2/packages/component/src/createLoadable.js#L75

@theKashey any ideas about how we can solve it?

[theKashey]

Hey guys, long time no see 😁
This - gregberge/loadable-components#568 - might help with the problem. @7rulnik - could you please try it.

Meanwhile - loadable overrides webpack's jsonp_callback for living, and is it working for already bundled remote as well?

[7rulnik]

@theKashey I tried but got the same error.
jsonp_callback works fine, yes.

I want to check the example in loadable repo. Maybe I was wrong and the problem exists there too.

[7rulnik]

I can confirm that example in loadable repo fails too. I believe it's better to track in loadable repo so I will file the issue and will add the example

[dylanjeffers]

This looks awesome. Question on the merged stats file. It seems like website1 is referencing website2's stats directly from source, is that correct?

[7rulnik]

@SapienTech you can import/fetch it from any source, for example from S3

[prateekr1]

@7rulnik there is already a issue filed in loadable repo for this issue

gregberge/loadable-components#558

I can confirm that example in loadable repo fails too. I believe it's better to track in loadable repo so I will file the issue and will add the example

👍

[theKashey]

server-side-rendering? It fails due to moment-js "default export" transformation, which is a bit different case.

[7rulnik]

@theKashey I tried without moment too. Same error.

[theKashey]

Ok, but we are talking about the same example. I was running it with changes in the PR I've mentioned above just a few days ago, and it was working (except loadable.lib).

[prateekr1]

@7rulnik

I can confirm that example in loadable repo fails too. I believe it's better to track in loadable repo so I will file the issue and will add the example

can you specify steps to reproduce it in example of loadable repo.

[7rulnik]

I created PR with repro failing with async-node target so let's track this problem in loadable-components repo.

gregberge/loadable-components#575

[theKashey]

@7rulnik - I'll borrow your example for imported-component as well.

[ScriptedAlchemy]

Async node uses fs+vm vs node which uses require

[7rulnik]

@ScriptedAlchemy so we need these assets in webpack stats or in separate federation stats. I want to contribute it, but maybe you could point me where I should start?

[theKashey]

@7rulnik - please check this PR - gregberge/loadable-components#573 - might be it changes something in a way you need it.

[7rulnik]

Why did you close it? @ScriptedAlchemy

[ScriptedAlchemy]

Rewrite git history

[ScriptedAlchemy]

can you branch off master, then merge this back into a new branch that's fresh from baster