React 17 + 18 support

[apepper]

Currently @loadable/component only supports react 16 is supported:

https://github.com/gregberge/loadable-components/blob/cba6cab47536e23ded8bac34ee24417e6452344e/package.json#L54-L55

It would be great, if it would also support React 17 and the latest React 18.

[open-collective-bot[bot]]

Hey @apepper :wave:, Thank you for opening an issue. We'll get back to you as soon as we can. Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers. If you use Loadable at work, you can also ask your company to sponsor us :heart:.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[apepper]

This is not stale. React 17 is still not supported:

https://github.com/gregberge/loadable-components/blob/73b17fd067579b1c5d38eba00e157964e0930a94/package.json#L54-L55

[partoneplay]

I use [email protected] and @loadable/[email protected]. They work well.

[azangru]

They work, but it shows a dependency conflict when installing packages with npm 7:

Please fix this 🙏

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[IPRIT]

Still relevant

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[IPRIT]

1️⃣7️⃣

[theKashey]

1️⃣8️⃣

[mike-parkhomenko]

Hey! Is it possible to let us know approximately date for the next release with React 17,18 support?

Thanks)

[abhisharkjangir]

Is it supports react v18? I'm getting below error with

• "react": "^18.1.0"
• "react-dom": "^18.1.0"
• webpack": "^5.73.0"
• "@loadable/babel-plugin": "^5.13.2",
• "@loadable/component": "^5.15.2",
• "@loadable/server": "^5.15.2",
• "@loadable/webpack-plugin": "^5.15.2",

[reverofevil]

@abhisharkjangir No, it doesn't. The library is mostly dead for the last 2 years, except for a few fixes by @theKashey.

[azangru]

Now that the React team has stopped recommending loadable-components in their docs, does anyone know what the official blessed setup is? With React.lazy, webpack, server-side rendering, and all?

[reverofevil]

React 18 is a frontend library, it can't collect a list of dynamic imports that were awaited for during SSR. You can't do it with loadable components anymore, because it's incompatible. You can't do it with Vite SSR in dev mode, because it uses ESM and you can't hook calls to require there. I don't think there is any solution at the moment that actually works and might be used in production.

[azangru]

I'll just leave Dan's code sandbox here, from a comment where he said that React.lazy "just works" now. Perhaps this is what the recommended way of doing this now is.

[theKashey]

There is no recommended way of doing this and the majority of libraries(or react itself) are not working one way or another due to different reasons.

• the example from Dan will break on any ContextAPI update - https://github.com/facebook/react/issues/22692
• default examples from Loadable Components are failing since 16.10 due to change in Suspense - now you have to use it on server-side (before it will generate a problem)
  • non Suspense-based usage of Loadable-component is working

[vaukalak]

@abhisharkjangir I've created an example of usign loadable-components with react 18. It might be, that you were facing the same hydration issue before, due to differences in your server and client generated HTML. However now, with react 18 this actually creates an error, rather than just logging the warning.

[abhisharkjangir]

@vaukalak Thanks, I'll try if it works for me or not.

[fivethreeo]

React 18 with Suspense would be better if chunkextractor could have a reset method. Then we could use a custom writable in renderToPipeableStream that wrote the discovered components script tags as we render.

But loadableReady in the client cannot be used anymore so maybe write some script tags that say which modules will be loaded from those async script tags so we don’t try to refetch those during hydration.

If I understand all this correctly.

https://github.com/reactwg/react-18/discussions/114

https://github.com/brillout/react-streaming#injecttostream

[santicalvo]

Hello, I see there is a next release tag on this issue.

Is there a roadmap or a release date scheduled? Any branch for development?

Thanks a lot for this library!

[fivethreeo]

So decided to not use

https://github.com/brillout/react-streaming#injecttostream

Instead I did this

  let didError = false;
  let shellReady = false;

  class LoadableWritable extends Writable {
    constructor(writable) {
      super();
      this._writable = writable;
    }

    _write(chunk, encoding, callback) {
      // This should pick up any new link tags that hasn't been previously
      // written to this stream.
      if (shellReady) {
      }
      // Finally write whatever React tried to write.

      this._writable.write(chunk, encoding, callback);
    }

    end() {
      this._writable.end()
    }

    flush() {
      if (typeof this._writable.flush === 'function') {
        this._writable.flush();
      }
    }
  }

  const writeable = new LoadableWritable(res)

  const stream = renderToPipeableStream(<Html assets={{}}><App /></Html>,
    {
      onShellReady() {
        // The content above all Suspense boundaries is ready.
        // If something errored before we started streaming, we set the error code appropriately.
        res.statusCode = didError ? 500 : 200;
        res.setHeader('Content-type', 'text/html');
        shellReady = true;

        stream.pipe(writeable);

      })

https://github.com/fivethreeo/loadable-components-react-18

Will try adding loadabe-components soon

Clone and run

pnpm i
pnpm start

[fivethreeo]

Tried adding loadable components with streaming react and suspense. Did not work.

[fivethreeo]

Added support for streaming rendering with suspense here.

https://github.com/fivethreeo/loadable-components/tree/feature/server-side-suspense/examples/streaming-server-side-rendering

https://github.com/gregberge/loadable-components/issues/889

[dglozic]

Any outlook for React 18 support in the near future?

[theKashey]

There is "real" React 18 support in works - https://github.com/gregberge/loadable-components/pull/923, but I don't see any reason not to update package dependencies right away...

[dglozic]

I agree - people can upgrade to 18 and get the current code to work, while deferring the use of renderToPipeableStream and suspense until it is supported by loadable components. Actually, no, they can (and must) use it as renderToNodeStream is buffered in 18, but we can continue to render the App portion using renderToString while collecting loadables in SSR until full support is available.

[theKashey]

v5.15.3 has react dependency version changed

• from
  • "react": ">=16.3.0", which should work
• to
  • "react": "^16.3.0 || ^17.0.0 || ^18.0.0", which definitely works and more common in the ecosystem

[TwisterMc]

Did this happen? I don't see a v 5.15.3 in the releases and v5.16.0 says "react": "^16.12.0"