diff --git a/packages/sui-react-initial-props/src/createClientContextFactoryParams.ts b/packages/sui-react-initial-props/src/createClientContextFactoryParams.js
similarity index 63%
rename from packages/sui-react-initial-props/src/createClientContextFactoryParams.ts
rename to packages/sui-react-initial-props/src/createClientContextFactoryParams.js
index 5f69702f7..2403c5e5f 100644
--- a/packages/sui-react-initial-props/src/createClientContextFactoryParams.ts
+++ b/packages/sui-react-initial-props/src/createClientContextFactoryParams.js
@@ -1,6 +1,4 @@
-import { ContextFactoryParams } from './types'
-
-export default (): ContextFactoryParams => ({
+export default () => ({
appConfig: window.__APP_CONFIG__,
cookies: document.cookie,
isClient: true,
diff --git a/packages/sui-react-initial-props/src/createServerContextFactoryParams.ts b/packages/sui-react-initial-props/src/createServerContextFactoryParams.js
similarity index 63%
rename from packages/sui-react-initial-props/src/createServerContextFactoryParams.ts
rename to packages/sui-react-initial-props/src/createServerContextFactoryParams.js
index 5012976bf..d49f9f812 100644
--- a/packages/sui-react-initial-props/src/createServerContextFactoryParams.ts
+++ b/packages/sui-react-initial-props/src/createServerContextFactoryParams.js
@@ -1,6 +1,4 @@
-import { ContextFactoryParams } from './types'
-
-export default (req: IncomingMessage.ServerRequest): ContextFactoryParams => ({
+export default req => ({
appConfig: req.appConfig,
req,
cookies: req.headers.cookie,
diff --git a/packages/sui-react-initial-props/src/index.js b/packages/sui-react-initial-props/src/index.js
new file mode 100644
index 000000000..63cd26114
--- /dev/null
+++ b/packages/sui-react-initial-props/src/index.js
@@ -0,0 +1,4 @@
+export {default as createClientContextFactoryParams} from './createClientContextFactoryParams.js'
+export {default as createServerContextFactoryParams} from './createServerContextFactoryParams.js'
+export {default as loadPage} from './loadPage.js'
+export {default as ssrComponentWithInitialProps} from './ssrComponentWithInitialProps.js'
diff --git a/packages/sui-react-initial-props/src/index.ts b/packages/sui-react-initial-props/src/index.ts
deleted file mode 100644
index f043a5c6d..000000000
--- a/packages/sui-react-initial-props/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as createClientContextFactoryParams } from './createClientContextFactoryParams'
-export { default as createServerContextFactoryParams } from './createServerContextFactoryParams'
-export { default as loadPage } from './loadPage'
-export { default as ssrComponentWithInitialProps } from './ssrComponentWithInitialProps'
diff --git a/packages/sui-react-initial-props/src/initialPropsContext.js b/packages/sui-react-initial-props/src/initialPropsContext.js
new file mode 100644
index 000000000..b37eb74f3
--- /dev/null
+++ b/packages/sui-react-initial-props/src/initialPropsContext.js
@@ -0,0 +1,3 @@
+import {createContext} from 'react'
+
+export default createContext({initialProps: {}})
diff --git a/packages/sui-react-initial-props/src/initialPropsContext.ts b/packages/sui-react-initial-props/src/initialPropsContext.ts
deleted file mode 100644
index 83d89f74f..000000000
--- a/packages/sui-react-initial-props/src/initialPropsContext.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-
-export default createContext({ initialProps: {} })
diff --git a/packages/sui-react-initial-props/src/loadPage.js b/packages/sui-react-initial-props/src/loadPage.js
new file mode 100644
index 000000000..64226bdc1
--- /dev/null
+++ b/packages/sui-react-initial-props/src/loadPage.js
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import {useContext} from 'react'
+
+import InitialPropsContext from './initialPropsContext.js'
+import withInitialProps from './withInitialProps.js'
+
+const EMPTY_GET_INITIAL_PROPS = async () => ({})
+
+const createUniversalPage =
+ routeInfo =>
+ async ({default: Page}) => {
+ // check if the Page page has a getInitialProps, if not put a resolve with an empty object
+ Page.getInitialProps = typeof Page.getInitialProps === 'function' ? Page.getInitialProps : EMPTY_GET_INITIAL_PROPS
+
+ // CLIENT
+ if (typeof window !== 'undefined') {
+ // let withInitialProps HOC handle client getInitialProps logic
+ return Promise.resolve(withInitialProps(Page))
+ }
+ // SERVER
+ // Create a component that gets the initialProps from context
+ // this context has been created on the `ssrWithComponentWithInitialProps`
+ const ServerPage = props => {
+ const {initialProps} = useContext(InitialPropsContext)
+ return
+ }
+ // recover the displayName from the original page
+ ServerPage.displayName = Page.displayName
+ // detect if the page has getInitialProps and wrap it with the routeInfo
+ // if we don't have any getInitialProps, just use a empty function returning an empty object
+ ServerPage.getInitialProps = (context, req, res) => Page.getInitialProps({context, routeInfo, req, res})
+ // return the component to be used on the server
+ return ServerPage
+ }
+
+// TODO: Remove this method on next major as it's using unnecessary contextFactory param
+// and unnecesary calling done method instead relying on promises
+export default (_, importPage) => async (routeInfo, done) => {
+ importPage()
+ .then(createUniversalPage(routeInfo))
+ .then(Page => {
+ done(null, Page)
+ })
+}
diff --git a/packages/sui-react-initial-props/src/loadPage.tsx b/packages/sui-react-initial-props/src/loadPage.tsx
deleted file mode 100644
index 74599fc99..000000000
--- a/packages/sui-react-initial-props/src/loadPage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-import { useContext } from 'react'
-
-import InitialPropsContext from './initialPropsContext'
-import { ClientPageComponent, DoneImportingPageCallback, ReactRouterTypes, WithInitialPropsComponent } from './types'
-import withInitialProps from './withInitialProps'
-
-const EMPTY_GET_INITIAL_PROPS = async (): Promise