Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

client side javascript is not working in react-18-ssr example #3117

Closed
wibed opened this issue Jul 13, 2023 · 5 comments
Closed

client side javascript is not working in react-18-ssr example #3117

wibed opened this issue Jul 13, 2023 · 5 comments

Comments

@wibed
Copy link
Contributor

wibed commented Jul 13, 2023

using react-18-ssr https://github.com/module-federation/module-federation-examples/tree/master/react-18-ssr

example i am stuck at using client side javascript.
anyone experiencing the same issue?

i tried, to no success,

  • adjusting the chunks and how they split:
    ('initial' && 'all' does make the app render, but client side javascript is non functional)
optimization: { splitChunks: { chunks: 'async' || 'initial' || 'false' || 'all'} }
  • aswell as a more complicated approach
optimization: {
      splitChunks: {
        cacheGroups: {
          defaultVendors: {
            name: `chunk-vendors`,
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'async',
            reuseExistingChunk: true
          },
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'async',
            reuseExistingChunk: true
          }
        }
      }
    }

related issue:
#1116
#307
#1273
#692
#2799

( the answers does not provide a solution though)

@wibed wibed changed the title client side javascript is not working client side javascript is not working in react-18-ssr example Jul 15, 2023
@ScriptedAlchemy
Copy link
Member

Seems to work here:
image

I updated the node federation plugin instance on it as well.

#3125

Dont mess with chunk splits, this can cause collisions in webpack graph

@wibed
Copy link
Contributor Author

wibed commented Aug 9, 2023

@ScriptedAlchemy

i had a look at your fix branch origin/fix_react_18_example
i couldnt reproduce the success of it.

flashing (it loads for a split second and unloads again, see video) still occurs ootb, and if i try disabling split chunks. the clientside javascript does not load at all

demo.mp4

EDIT:
including the error from the console

ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:3001/client/remoteEntry.js)
while loading "./Content" from 9223
    9223 remoteEntry.js":1
    Webpack 13
[react-dom.production.min.js:189:29](webpack://react-ssr/node_modules/react-dom/cjs/react-dom.production.min.js)
    React 9
    S scheduler.production.min.js:13
    T scheduler.production.min.js:14
    exports _invoke.js:5
    <anonymous> _task.js:35
    b _task.js:21
    x _task.js:25
    (Async: EventHandlerNonNull)
    9124 _task.js:57
    Webpack 11

EDIT2:

How did you get it to work?
i tested it on

  • safari
  • firefox
  • google chrome

none of which had your result.

@ScriptedAlchemy
Copy link
Member

contact valor software if you are stuck, in my orgs main readme

@wibed
Copy link
Contributor Author

wibed commented Aug 26, 2023

kindly reopen, i just tested it again. fresh download, yarn && yarn start.
as per readme

maybe one of the community managed to get a success

@wibed
Copy link
Contributor Author

wibed commented Aug 29, 2023

#957

found this little gem. the last comment did the trick for me

I ran into this issue and the problem ended up being running the host app in VSCode terminal instead of the OS terminal

awesome if it could be included in the docs somehow.

@wibed wibed closed this as completed Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants