diff --git a/package.json b/package.json index 9e6bc0fe03..b0543216f8 100644 --- a/package.json +++ b/package.json @@ -361,7 +361,7 @@ "razzle": "3.4.5", "razzle-plugin-bundle-analyzer": "1.2.0", "rc-time-picker": "3.7.3", - "react": "17.0.2", + "react": "18.0.0", "react-anchor-link-smooth-scroll": "1.0.12", "react-animate-height": "2.0.17", "react-beautiful-dnd": "13.0.0", @@ -370,7 +370,7 @@ "react-detect-click-outside": "1.1.1", "react-dnd": "5.0.0", "react-dnd-html5-backend": "5.0.1", - "react-dom": "17.0.2", + "react-dom": "18.0.0", "react-dropzone": "11.1.0", "react-fast-compare": "2.0.4", "react-image-gallery": "1.0.7", diff --git a/src/helpers/AuthToken/AuthToken.js b/src/helpers/AuthToken/AuthToken.js index e5f2c5c3a7..708a9af534 100644 --- a/src/helpers/AuthToken/AuthToken.js +++ b/src/helpers/AuthToken/AuthToken.js @@ -78,7 +78,7 @@ export function persistAuthToken(store, req) { ) { store.dispatch(loginRenew()); } else { - // TODO: issue Logout + // TODO: issue Logout, depend on history, pass it from the client } } }, exp); diff --git a/src/server.jsx b/src/server.jsx index 2086135208..12d372928d 100644 --- a/src/server.jsx +++ b/src/server.jsx @@ -1,4 +1,5 @@ /* eslint no-console: 0 */ +import fs from 'fs'; import '@plone/volto/config'; // This is the bootstrap for the global config - server side import { existsSync, lstatSync, readFileSync } from 'fs'; import React from 'react'; @@ -17,6 +18,7 @@ import { resetServerContext } from 'react-beautiful-dnd'; import { CookiesProvider } from 'react-cookie'; import cookiesMiddleware from 'universal-cookie-express'; import debug from 'debug'; +import { renderToPipeableStream } from 'react-dom/server'; import routes, { Routes } from '@root/routes'; import config from '@plone/volto/registry'; @@ -190,6 +192,9 @@ server.get('/*', (req, res) => { statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')), entrypoints: ['client'], }); + const assets = JSON.parse( + fs.readFileSync(path.resolve(path.join(buildDir, 'loadable-stats.json'))), + ); const url = req.originalUrl || req.url; const location = parseUrl(url); @@ -257,24 +262,39 @@ server.get('/*', (req, res) => { `, ); } else { - res.status(200).send( - ` - ${renderToString( - , - )} - `, + let didError = false; + const assetsJS = assets['entrypoints']['client']['assets'].filter((asd) => + asd.endsWith('.js'), + ); + console.log(assetsJS); + res.socket.on('error', (error) => { + console.error('Fatal', error); + }); + + const { pipe, abort } = renderToPipeableStream( + , + { + bootstrapScripts: assetsJS, + onShellReady() { + // If something errored before we started streaming, we set the error code appropriately. + res.statusCode = didError ? 500 : 200; + res.setHeader('Content-type', 'text/html'); + pipe(res); + }, + onError(x) { + didError = true; + console.error(x); + }, + }, ); + setTimeout(abort, 10000); } }); diff --git a/src/start-client.jsx b/src/start-client.jsx index a1301cd9d6..b0c82bec70 100644 --- a/src/start-client.jsx +++ b/src/start-client.jsx @@ -1,7 +1,7 @@ import '@plone/volto/config'; // This is the bootstrap for the global config - client side import '@root/theme'; import React from 'react'; -import { hydrate } from 'react-dom'; +import { hydrateRoot } from 'react-dom'; import { Provider } from 'react-redux'; import { IntlProvider } from 'react-intl-redux'; import { BrowserRouter } from 'react-router-dom'; @@ -54,7 +54,8 @@ export default () => { } loadableReady(() => { - hydrate( + hydrateRoot( + document.getElementById('main'), @@ -66,7 +67,6 @@ export default () => { , - document.getElementById('main'), ); }); }; diff --git a/yarn.lock b/yarn.lock index 8b9b990d60..e6b0369fc3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16557,14 +16557,13 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" + integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.21.0" react-draggable@^4.4.3: version "4.4.3" @@ -16982,13 +16981,12 @@ react-with-styles@^4.1.0: prop-types "^15.7.2" react-with-direction "^1.3.1" -react@17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" + integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" read-pkg-up@^1.0.1: version "1.0.1" @@ -17923,6 +17921,13 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" + integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== + dependencies: + loose-envify "^1.1.0" + schema-utils@2.7.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6.6: version "2.7.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"