"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

I finally managed to figure this out, seems like I had the puzzle pieces but I was putting them together in all the wrong ways. I'll post the complete solution in case anyone ever wants it.

The first thing to mention is that using any react server functions without some sort of a bundler like webpack isn't possible, or it's possible but it wouldn't make sense because you will have images and css and stuff that typescript can't parse.

The first thing you'll need is the normal webpack config that you're used to:

const config = {
  output: {
    path: path.join(__dirname, 'public'),
    filename: '[contenthash].js',
    assetModuleFilename: '[contenthash].[ext]',
    publicPath: '/',
    libraryTarget: 'umd',
    clean: false,
  },
  target: 'web',
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [/node_modules/],
      },
      {
        test: /\.(jpg|png|ico)$/,
        type: 'asset/resource',
        generator: {
          filename: '[contenthash].[ext]',
        },
      },
    ],
  },
  ...

It's not the complete config but it will give a general idea. There you can use all the normal plugins and stuff you're used to, i.e. file-loader or style-loader or whatever.

After that assume that you have a directory structure like this:

- webpack.config.js
- ui/route // we want all files here to be SSR and client side rendered

Then you can bundle all of that like you normally do and serve it client side using your normal webpack setup. However in addition to that you'll need some kind of a compiler to write your .js files in order to be consumed by react server functions. This is the key part.

import fs from 'fs'
import path from 'path'
import webpack from 'webpack'

import config from '../webpack.config.js'

const configuration = config({production: true})

const files = fs.readdirSync(path.join(__dirname, 'ui/route'))

for (const file of files) {
  if (file.indexOf('.map') === -1) {
    configuration.target = 'node'
    configuration.entry = path.join(__dirname, 'ui/route', file)
    configuration.output.path = path.join(__dirname, '../public')
    configuration.output.filename = file // [contenthash].js

    const compiler = webpack(configuration)
    compiler.run((error) => {
      console.log(error)

      compiler.close((error) => {
        console.log(error)
      })
    })
  }
}

That code is very raw and can still be optimized in many different ways, but it shows you what you can do. You can either do each file individually, or you can create some sort of a glob to read everything off a specific directory (or search it recursively), then you programmatically invoke the webpack compiler and output each file (page (route)) separately to their directories as .js files, each with their own CSS/Images/whatever already compiled with webpack. Something to note here is don't go and create different webpack configs for no reason, all you need to change is the target to node, the entry and the output, you can use the original webpack config to do that.

Then you can include this compiler in your build step, so each time you start the server using something like tsc && node lib/compiler.js && lib/server.js. This will build all your stuff, after which it will invoke webpack on all of it and output those files, then you start the server. You can also do it dynamically, that's up to you. What's important here is that typescript should only compile your server side files while webpack (with ts-loader invoking typescript) should compile your UI files.

After that you can use:

// api/example.tsx

import HTML from './html' // the html.js file we just compiled with webpack

export const index = async (
  request: Request,
  response: Response,
): Promise<void> => {
  console.log(request.url)

  const stream = renderToNodeStream(<HTML />)

  stream.pipe(response)

  stream.on('end', () => {
    response.end()
  })
}

To render the webpack output files with react and send them as a stream to the requesting client. Note that in the above case HTML should be a .js file that was output using webpack's compiler, this is important, don't try to include the typescript/original javascript components here. So you want to compile it with webpack, then feed that javascript output to react's server functions in your API. Note that the above is an express server.

Here's the original HTML typescript component before it was compiled with webpack:

import React from 'react'

const HTML = (): JSX.Element => {
  return (
    <>
      <html>
        <head>
          <meta charSet='utf-8' />
          <meta name='robots' content='index, follow' />
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <title>Title</title>
          <script src='/script.js' defer></script>
        </head>
        <body>
          <div id='ui'></div>
        </body>
      </html>
    </>
  )
}

export default HTML

Then the only thing left to to is to hydrate the original client side webpack UI.

import React from 'react'
import {hydrate} from 'react-dom'

import HTML from './html'

const UI = () => {
  return <HTML/>
}

hydrate(<UI />, document.getElementById('ui'))

Or you can do:

import React from 'react'
import {render} from 'react-dom'

const UI = () => {
  return <>Hello World!</>
}

render(<UI />, document.getElementById('ui'))

Now when I request '/' the server will start streaming the HTML string to the UI, after which it will fetch the script.js file, which is the client side webpack bundle with the hydrate and once that hits the client's browser it will hydrate the markup that was previously streamed.

Congratulations, now you have an API serving HTML without any prerendered html file!

The key here is to create the custom compiler with webpack and to override the entry and output files, then to consume those files in the react server functions after they've been built.

EDIT: Slight improvement on compiler performance. You can run multiple compilers like this, each with their own config.

var webpack = require('webpack');

var config1 = {
  entry: './index1.js',
  output: {filename: 'bundle1.js'}
}
var config2 = {
  entry: './index2.js',
  output: {filename:'bundle2.js'}
}

webpack([config1, config2], (err, stats) => {
  process.stdout.write(stats.toString() + "\n");
})

And if you wanna go the extra mile you can write files to memory instead of disk using https://www.npmjs.com/package/memfs:

import {fs} from 'memfs'

...

compiler.outputFileSystem = fs

...

const content = fs.readFileSync('...')

https://webpack-v3.jsx.app/api/compiler/#watching

Which is what webpack-dev-server uses under the hood.

If I weren't previously a webpack enthusiast, I am now... This has opened up a whole new can of worms of what webpack is really capable of.

To resolve error "SyntaxError: Invalid or unexpected token" regarding CSS on server side node.js install css-modules-transform with dev dependency

npm install css-modules-transform --save-dev

and at .bablerc add

{
"plugins": ["css-modules-transform"]
}

To resolve error "SyntaxError: Invalid or unexpected token" regarding Files on server side node.js install babel-plugin-file-loader with dev dependency

npm install babel-plugin-file-loader --save-dev

and at .bablerc add

{
"plugins": ["css-modules-transform", "file-loader"]
}