SSR Error

[decoderid]

INTRO

I want to use SSR but an error occurs as follows, if not using the SSR application it runs normally

ERROR

require() of ES Module D:\project2023\myproject.com\node_modules\@inertiajs\react\dist\index.js from D:\project2023\myproject.com\inertia\ssr\ssr.js not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in D:\project2023\myproject.com\node_modules\@inertiajs\react\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

ERROR REFERENCE IN node_modules

/*!***********************************!*\
  !*** external "@inertiajs/react" ***!
  \***********************************/
/***/ ((module) => {

module.exports = require("@inertiajs/react");

/***/ }),

/***/ "@inertiajs/react/server":
/*!******************************************!*\

ssr.jsx

import React from 'react'
import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import ReactDOMServer from 'react-dom/server'

createServer((page) =>
  createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => require(`./Pages/${name}`),
    setup: ({ App, props }) => <App {...props} />,
  })
)

app.jsx

import React from 'react'
import { createInertiaApp } from '@inertiajs/react'
import { hydrateRoot } from 'react-dom/client'

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    hydrateRoot(el, <App {...props} />)
  },
})

webpack.config.js

const { join } = require('path')
const Encore = require('@symfony/webpack-encore')

/*
|--------------------------------------------------------------------------
| Encore runtime environment
|--------------------------------------------------------------------------
*/
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

/*
|--------------------------------------------------------------------------
| Output path
|--------------------------------------------------------------------------
|
| The output path for writing the compiled files. It should always
| be inside the public directory, so that AdonisJS can serve it.
|
*/
Encore.setOutputPath('./public/assets')

/*
|--------------------------------------------------------------------------
| Public URI
|--------------------------------------------------------------------------
|
| The public URI to access the static files. It should always be
| relative from the "public" directory.
|
*/
Encore.setPublicPath('/assets')

/*
|--------------------------------------------------------------------------
| Entrypoints
|--------------------------------------------------------------------------
|
| Entrypoints are script files that boots your frontend application. Ideally
| a single entrypoint is used by majority of applications. However, feel
| free to add more (if required).
|
| Also, make sure to read the docs on "Assets bundler" to learn more about
| entrypoints.
|
*/
Encore.addEntry('app', './resources/js/app.jsx')
Encore.enableTypeScriptLoader()
Encore.enableReactPreset()

/*
|--------------------------------------------------------------------------
| Copy assets
|--------------------------------------------------------------------------
|
| Since the edge templates are not part of the Webpack compile lifecycle, any
| images referenced by it will not be processed by Webpack automatically. Hence
| we must copy them manually.
|
*/
// Encore.copyFiles({
//   from: './resources/images',
//   to: 'images/[path][name].[hash:8].[ext]',
// })

/*
|--------------------------------------------------------------------------
| Split shared code
|--------------------------------------------------------------------------
|
| Instead of bundling duplicate code in all the bundles, generate a separate
| bundle for the shared code.
|
| https://symfony.com/doc/current/frontend/encore/split-chunks.html
| https://webpack.js.org/plugins/split-chunks-plugin/
|
*/
// Encore.splitEntryChunks()

/*
|--------------------------------------------------------------------------
| Isolated entrypoints
|--------------------------------------------------------------------------
|
| Treat each entry point and its dependencies as its own isolated module.
|
*/
Encore.disableSingleRuntimeChunk()

/*
|--------------------------------------------------------------------------
| Cleanup output folder
|--------------------------------------------------------------------------
|
| It is always nice to cleanup the build output before creating a build. It
| will ensure that all unused files from the previous build are removed.
|
*/
Encore.cleanupOutputBeforeBuild()

/*
|--------------------------------------------------------------------------
| Source maps
|--------------------------------------------------------------------------
|
| Enable source maps in production
|
*/
Encore.enableSourceMaps(!Encore.isProduction())

/*
|--------------------------------------------------------------------------
| Assets versioning
|--------------------------------------------------------------------------
|
| Enable assets versioning to leverage lifetime browser and CDN cache
|
*/
Encore.enableVersioning(Encore.isProduction())

/*
|--------------------------------------------------------------------------
| Configure dev server
|--------------------------------------------------------------------------
|
| Here we configure the dev server to enable live reloading for edge templates.
| Remember edge templates are not processed by Webpack and hence we need
| to watch them explicitly and livereload the browser.
|
*/
Encore.configureDevServerOptions((options) => {
  /**
   * Normalize "options.static" property to an array
   */
  if (!options.static) {
    options.static = []
  } else if (!Array.isArray(options.static)) {
    options.static = [options.static]
  }

  /**
   * Enable live reload and add views directory
   */
  options.liveReload = true
  options.static.push({
    directory: join(__dirname, './resources/views'),
    watch: true,
  })
})

/*
|--------------------------------------------------------------------------
| CSS precompilers support
|--------------------------------------------------------------------------
|
| Uncomment one of the following lines of code to enable support for your
| favorite CSS precompiler
|
*/
// Encore.enableSassLoader()
// Encore.enableLessLoader()
// Encore.enableStylusLoader()

/*
|--------------------------------------------------------------------------
| CSS loaders
|--------------------------------------------------------------------------
|
| Uncomment one of the following line of code to enable support for
| PostCSS or CSS.
|
*/
Encore.enablePostCssLoader()
// Encore.configureCssLoader(() => {})

/*
|--------------------------------------------------------------------------
| Enable Vue loader
|--------------------------------------------------------------------------
|
| Uncomment the following lines of code to enable support for vue. Also make
| sure to install the required dependencies.
|
*/
// Encore.enableVueLoader(() => {}, {
//   version: 3,
//   runtimeCompilerBuild: false,
//   useJsx: false
// })

/*
|--------------------------------------------------------------------------
| Configure logging
|--------------------------------------------------------------------------
|
| To keep the terminal clean from unnecessary info statements , we only
| log warnings and errors. If you want all the logs, you can change
| the level to "info".
|
*/
const config = Encore.getWebpackConfig()
config.infrastructureLogging = {
  level: 'warn',
}
config.stats = 'errors-warnings'

/*
|--------------------------------------------------------------------------
| Export config
|--------------------------------------------------------------------------
|
| Export config for webpack to do its job
|
*/
module.exports = config

webpack.ssr.config.js

const { join } = require('path')
const Encore = require('@symfony/webpack-encore')

/*
|--------------------------------------------------------------------------
| Encore runtime environment
|--------------------------------------------------------------------------
*/
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
}

/*
|--------------------------------------------------------------------------
| Output path
|--------------------------------------------------------------------------
|
| The output path for writing the compiled files. It should always
| be inside the public directory, so that AdonisJS can serve it.
|
*/
Encore.setOutputPath('./inertia/ssr')

/*
|--------------------------------------------------------------------------
| Public URI
|--------------------------------------------------------------------------
|
| The public URI to access the static files. It should always be
| relative from the "public" directory.
|
*/
Encore.setPublicPath('/ssr')

/*
|--------------------------------------------------------------------------
| Entrypoints
|--------------------------------------------------------------------------
|
| Entrypoints are script files that boots your frontend application. Ideally
| a single entrypoint is used by majority of applications. However, feel
| free to add more (if required).
|
| Also, make sure to read the docs on "Assets bundler" to learn more about
| entrypoints.
|
*/
Encore.addEntry('ssr', './resources/js/ssr.jsx')
Encore.enableTypeScriptLoader()
Encore.enableReactPreset()

/*
|--------------------------------------------------------------------------
| Isolated entrypoints
|--------------------------------------------------------------------------
|
| Treat each entry point and its dependencies as its own isolated module.
|
*/
Encore.disableSingleRuntimeChunk()

/*
|--------------------------------------------------------------------------
| Cleanup output folder
|--------------------------------------------------------------------------
|
| It is always nice to cleanup the build output before creating a build. It
| will ensure that all unused files from the previous build are removed.
|
*/
Encore.cleanupOutputBeforeBuild()

/*
|--------------------------------------------------------------------------
| Assets versioning
|--------------------------------------------------------------------------
|
| Enable assets versioning to leverage lifetime browser and CDN cache
|
*/
Encore.enableVersioning(Encore.isProduction())

/*
|--------------------------------------------------------------------------
| Configure dev server
|--------------------------------------------------------------------------
|
| Here we configure the dev server to enable live reloading for edge templates.
| Remember edge templates are not processed by Webpack and hence we need
| to watch them explicitly and livereload the browser.
|
*/
Encore.configureDevServerOptions((options) => {
  /**
   * Normalize "options.static" property to an array
   */
  if (!options.static) {
    options.static = []
  } else if (!Array.isArray(options.static)) {
    options.static = [options.static]
  }

  /**
   * Enable live reload and add views directory
   */
  options.liveReload = true
  options.static.push({
    directory: join(__dirname, './resources/views'),
    watch: true,
  })
})

/*
|--------------------------------------------------------------------------
| CSS precompilers support
|--------------------------------------------------------------------------
|
| Uncomment one of the following lines of code to enable support for your
| favorite CSS precompiler
|
*/
// Encore.enableSassLoader()
// Encore.enableLessLoader()
// Encore.enableStylusLoader()

/*
|--------------------------------------------------------------------------
| CSS loaders
|--------------------------------------------------------------------------
|
| Uncomment one of the following line of code to enable support for
| PostCSS or CSS.
|
*/
Encore.enablePostCssLoader()
// Encore.configureCssLoader(() => {})

/*
|--------------------------------------------------------------------------
| Enable Vue loader
|--------------------------------------------------------------------------
|
| Uncomment the following lines of code to enable support for vue. Also make
| sure to install the required dependencies.
|
*/
// Encore.enableVueLoader(() => {}, {
//   version: 3,
//   runtimeCompilerBuild: false,
//   useJsx: false,
// })

/*
|--------------------------------------------------------------------------
| Configure logging
|--------------------------------------------------------------------------
|
| To keep the terminal clean from unnecessary info statements , we only
| log warnings and errors. If you want all the logs, you can change
| the level to "info".
|
*/
const config = Encore.getWebpackConfig()
config.infrastructureLogging = {
  level: 'warn',
}
config.stats = 'errors-warnings'

/*
|--------------------------------------------------------------------------
| SSR Config
|--------------------------------------------------------------------------
|
*/
config.externals = [require('webpack-node-externals')()]
config.externalsPresets = { node: true }
config.output = {
  libraryTarget: 'commonjs2',
  filename: 'ssr.js',
  path: join(__dirname, './inertia/ssr'),
}
config.experiments = { outputModule: true }

/*
|--------------------------------------------------------------------------
| Export config
|--------------------------------------------------------------------------
|
| Export config for webpack to do its job
|
*/

module.exports = config

[marcelodelta]

I have the same problem with vue3

Could anyone help?

inertia/ssr/ssr.js
/*!**********************************!*\
  !*** external "@inertiajs/vue3" ***!
  \**********************************/
/***/ ((module) => {

module.exports = require("@inertiajs/vue3");

/***/ }),

/***/ "@vue/server-renderer":
/*!***************************************!*\
            

require() of ES Module C:\Users\upoa\software\node_modules\@inertiajs\vue3\dist\index.js from C:\Users\upoa\software\inertia\ssr\ssr.js not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\upoa\software\node_modules\@inertiajs\vue3\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

[marcelodelta]

It worked using the code below.

webpack.ssr.config.js

// config.externals = [require('webpack-node-externals')()]
const nodeExternals = require('webpack-node-externals');

config.externals = [
nodeExternals({
allowlist: ['@inertiajs/core', '@inertiajs/vue3'],
}),
]

[decoderid]

It worked using the code below.

webpack.ssr.config.js

// config.externals = [require('webpack-node-externals')()] const nodeExternals = require('webpack-node-externals');

config.externals = [ nodeExternals({ allowlist: ['@inertiajs/core', '@inertiajs/vue3'], }), ]

doesn't work in build versionm you can add this in config/intertia.ts for allowlist property

[brlebtag]

I am also having the same problem. @decoderid solution did not worked for me...

require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    err: {
      "type": "Error",
      "message": "require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.\nindex.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains \"type\": \"module\" which declares all .js files in that package scope as ES modules.\nInstead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change \"type\": \"module\" to \"type\": \"commonjs\" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).\n",
      "stack":
          Error [ERR_REQUIRE_ESM]: require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.
          index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
          Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
          
              at ./node_modules/@inertiajs/react/dist/index.js (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:169:725)
              at __webpack_require__ (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:199:41)
              at ./resources/js/ssr.tsx (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:77:15)
              at __webpack_require__ (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:199:41)
              at Object.<anonymous> (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:251:36)
              at Inertia.renderSsrPage (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/src/Inertia.js:97:24)
              at Inertia.render (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/src/Inertia.js:77:47)
              at async PreCompiler.runRouteHandler [as fn] (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@adonisjs/http-server/build/src/Server/PreCompiler/index.js:44:31)
              at async InertiaMiddleware.handle (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/middleware/Inertia.js:10:9)
              at async Server.handleRequest (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@adonisjs/http-server/build/src/Server/index.js:108:13)
      "code": "ERR_REQUIRE_ESM",
      "status": 500
    }

I can't make work Adonis + React + SSR + Inertia. One difference from my configuration to the above is that I can't use require() within .jsx. I am having to use import() instead. Otherwise I got an error before this one.

[brlebtag]

Hi everyone, I found the solution to my problem and I'd like to share it with everyone.

First of all, @eidellev, Thank you very much for your hard work!

I don't know if it was 'designed' this way or not but I think we need to install @inertiajs/core when we execute node ace configure @eidellev/inertia-adonisjs.

I think the problem we are experiencing when we are trying to use SSR with adonis is because it is missing @inertiajs/core package.

Here goes a small tutorial on how to set up adonis project from the begining for React:

1. Create a new adonis project:

npm init adonis-ts-app@latest adonisssr

Don't forget to select web and yes to 'Configure webpack encore for compiling frontend assets?'

2. Configure Encore:

node ace configure encore

3. Install @eidellev/inertia-adonisjs package:

npm i -S @eidellev/inertia-adonisjs

4. Configure @eidellev/inertia-adonisjs package:

node ace configure @eidellev/inertia-adonisjs

5. Install the missing @inertiajs/core package:

npm i -S @inertiajs/core`

6. Add Inertia middleware to start/kernel.ts:

Server.middleware.register([
  () => import('@ioc:Adonis/Core/BodyParser'),
  () => import('@ioc:EidelLev/Inertia/Middleware'),
]);

7. Create ./resources/js/app.jsx and add the following code:

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}.jsx`),
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

8. create ./resources/js/ssr.jsx and add the following code:

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/react'

export default function render(page) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => require(`./Pages/${name}.jsx`),
    setup: ({ App, props }) => <App {...props} />,
  })
}

9. Install @babel/preset-react package:

npm i -D @babel/preset-react

10. Enable React presets at webpack.config.js AND webpack.ssr.config.js

Encore.enableReactPreset()

11. Rename app.js to app.jsx at webpack.config.js

Encore.addEntry('app', './resources/js/app.jsx')

12. Rename ssr.js to ssr.jsx at webpack.ssr.config.js

Encore.addEntry('ssr', './resources/js/ssr.jsx')

13. Add @inertiajs/core and @inertiajs/react to allowlist at webpack.ssr.config.js

config.externals = [
  require('webpack-node-externals')({
    allowlist: ['@inertiajs/core', '@inertiajs/react'],
  }),
]

Some people complained that you needed to load require('webpack-node-externals') to a variable first and then use, like this:

const externals = require('webpack-node-externals')
config.externals = [
  externals({
    allowlist: ['@inertiajs/core', '@inertiajs/react'],
  }),
]

but for me, both ways worked.
14. Create a Pages folder at ./resources/js and inside of it, create a Index.jsx (./resources/js/Pages/Index.jsx) and add the following code:

import React from 'react'

export default function Index({ title }) {
  return <div>{title}</div>
}

15. Change ./start/routes.ts to use inertia and render our recently created page:

Route.get('/', async ({ inertia }) => inertia.render('Index', { title: 'Hello World!' }))

16. Lastly, compile the files using both (in two separated terminals) following commands:

Terminal 1:

npm run dev

Terminal 2:

node ace ssr:watch

And that's all folks. I hope I did not miss anything.

Hi everyone, I found the solution to my problem and I'd like to share it with everyone.

First of all, @eidellev, Thank you very much for your hard work!

I don't know if it was 'designed' this way or not but I think we need to install @inertiajs/core when we execute node ace configure @eidellev/inertia-adonisjs.

I think the problem we are experiencing when we are trying to use SSR with adonis is because it is missing @inertiajs/core package.

Here goes a small tutorial on how to set up adonis project from the begining for React:

1. Create a new adonis project:

npm init adonis-ts-app@latest adonisssr

Don't forget to select web and yes to 'Configure webpack encore for compiling frontend assets?'

2. Configure Encore:

node ace configure encore

3. Install @eidellev/inertia-adonisjs package:

npm i -S @eidellev/inertia-adonisjs

4. Configure @eidellev/inertia-adonisjs package:

node ace configure @eidellev/inertia-adonisjs

5. Install the missing @inertiajs/core package:

npm i -S @inertiajs/core`

6. Add Inertia middleware to start/kernel.ts:

Server.middleware.register([
  () => import('@ioc:Adonis/Core/BodyParser'),
  () => import('@ioc:EidelLev/Inertia/Middleware'),
]);

7. Create ./resources/js/app.jsx and add the following code:

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}.jsx`),
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

8. create ./resources/js/ssr.jsx and add the following code:

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { createInertiaApp } from '@inertiajs/react'

export default function render(page) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => require(`./Pages/${name}.jsx`),
    setup: ({ App, props }) => <App {...props} />,
  })
}

9. Install @babel/preset-react package:

npm i -D @babel/preset-react

10. Enable React presets at webpack.config.js AND webpack.ssr.config.js

Encore.enableReactPreset()

11. Rename app.js to app.jsx at webpack.config.js

Encore.addEntry('app', './resources/js/app.jsx')

12. Rename ssr.js to ssr.jsx at webpack.ssr.config.js

Encore.addEntry('ssr', './resources/js/ssr.jsx')

13. Add @inertiajs/core and @inertiajs/react to allowlist at webpack.ssr.config.js

config.externals = [
  require('webpack-node-externals')({
    allowlist: ['@inertiajs/core', '@inertiajs/react'],
  }),
]

Some people complained that you needed to load require('webpack-node-externals') to a variable first and then use, like this:

const externals = require('webpack-node-externals')
config.externals = [
  externals({
    allowlist: ['@inertiajs/core', '@inertiajs/react'],
  }),
]

but for me, both ways worked. 14. Create a Pages folder at ./resources/js and inside of it, create a Index.jsx (./resources/js/Pages/Index.jsx) and add the following code:

import React from 'react'

export default function Index({ title }) {
  return <div>{title}</div>
}

15. Change ./start/routes.ts to use inertia and render our recently created page:

Route.get('/', async ({ inertia }) => inertia.render('Index', { title: 'Hello World!' }))

16. Lastly, compile the files using both (in two separated terminals) following commands:

Terminal 1:

npm run dev

Terminal 2:

node ace ssr:watch

And that's all folks. I hope I did not miss anything.

Thanks for sharing, it works very well with JavaScript.

However, as soon as I try to use TypeScript, adding Encore.enableTypeScriptLoader() to both the webpack.config.js and the webpack.ssr.config.ts, ..., I get the following error :

[qkab78]

Hello Everyone,

I hope you are all doing well.
I don't know if you still a problems with using Inertia with React SSR and Typescript but I have a little project that I am working on and it uses those technologies.
If you want to check out for yourself, here's the link to the repo : https://gitlab.com/qkab/learnencore.io

Hope it helps

[irwing-reza]

Hello Everyone,

I hope you are all doing well. I don't know if you still a problems with using Inertia with React SSR and Typescript but I have a little project that I am working on and it uses those technologies. If you want to check out for yourself, here's the link to the repo : https://gitlab.com/qkab/learnencore.io

Hope it helps

Thanks, your project helped me a lot, the main difference for me was using:

npm i -D @babel/preset-typescript
Encore.enableBabelTypeScriptPreset()

#Instead of:
Encore.enableTypeScriptLoader()

Used "jsx": "react" on tsconfig.json instead of "jsx": "react-jsx" since it breaks the SSR.

Update

If you want to use react-jsx
add the following to webpack.ssr.config.js

const webpack = require('webpack')

Encore.addPlugin(
  new webpack.ProvidePlugin({
    React: 'react',
  })
)