module-federation/module-federation-examples

server-side-rendering without server side rendering

Opened this issue · 1 comments

evgeniya-ch commented

Actual result:

<body>
<div id="root">
  <div>
    <div style="background-color:black;color:lightgrey;padding:1rem">
      <h1>Module Federation Example: Server Side Rendering</h1>
      <h2>This is the shell application.</h2>
    </div>
    <!--$!--><template></template><h1>Loading....</h1><!--/$-->
  </div>
</div>
<script async data-chunk="main" src="http://localhost:3000/static/main.js"></script>
</body>

Expected result:

<body>
<div id="root">
  <div>
    <div style="background-color:black;color:lightgrey;padding:1rem">
      <h1>Module Federation Example: Server Side Rendering</h1>
      <h2>This is the shell application.</h2>
    </div>
    <div style="background-color: green; color: lightgrey; padding: 1rem;">
      <h2>Remote 1: Content</h2>
      <p>This is the content from remote 1, which will include an image component exposed by
        remote2. This demonstrates nested federated modules being rendered server-side.</p>
      <div style="background-color: red; color: lightgrey; padding: 1rem; width: 500px;">
        <h2>Remote 2: Image</h2>
        <button style="margin-bottom: 1rem;">Click me to test i'm interactive!</button>
        <img src="https://i.ibb.co/jfTvC6Q/serge.jpg" alt="serge" border="0" style="width: 100%;">
      </div>
    </div>
  </div>
</div>
<script async data-chunk="main" src="http://localhost:3000/static/main.js"></script>
</body>

On server error:
Image

Client work normal:

Image
ScriptedAlchemy commented

looks like confiuration issue since its trying to require() the remote and not load it. you need to use the node runtime plugin or module-federation/node