title: Express router: TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string
body: <p>I know I am struggling in this problem.
  I am working on a webpack Universal React App but i got this error message and I have no idea where it come from:</p>
  <pre><code>TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received type function ([Function (anonymous)])
      at new NodeError (node:internal/errors:372:5)
      at Function.from (node:buffer:323:9)
      at ServerResponse.send (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\response.js:193:22)
      at eval (webpack://isomorphic-react-redux-router-app/./app/serverside/server.js?:17:19)
      at Layer.handle [as handle_request] (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\layer.js:95:5)
      at next (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\route.js:144:13)
      at Route.dispatch (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\route.js:114:3)
      at Layer.handle [as handle_request] (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\layer.js:95:5)
      at C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\index.js:284:15
      at Function.process_params (C:\Dev\isomorphic-react-redux-router-app\node_modules\express\lib\router\index.js:346:12)
  </code></pre>
  <p>I think it is because of the url on the eval argument:</p>
  <pre><code>webpack://isomorphic-react-redux-router-app/./app/serverside/server.js?:17:19
  </code></pre>
  <p>Having a relative path in the middle of the url is not good.
  Here are my webpack file:</p>
  <pre><code>const path = require('path');
  require(&quot;core-js/stable&quot;);
  require(&quot;regenerator-runtime/runtime&quot;);
  const nodeExternals = require('webpack-node-externals');
  
  module.exports = [ 
    {
      mode: 'development',
      stats: {warnings:false},
      target:'web',
      entry: {
        '/bundle-app': ['core-js','regenerator-runtime/runtime','./app/clientside/client.jsx']
      },
      output: {
        path: path.resolve(__dirname, 'build/dev'),
        filename: '[name].js',
        publicPath: '/'
      },
      module: {
        rules: [
        {
          test: /\.jpe?g|png$/,
          exclude: /node_modules/,
          use: [&quot;url-loader&quot;, &quot;file-loader&quot;]
        },
          {
            test: /\.(jsx|js)$/,
            include: path.resolve(__dirname, '/'),
            exclude: /node_modules/,
            use: [{
              loader: 'babel-loader',
            }]
          }
        ]
      },
    },
    {
      name: 'server',
      mode: 'development',
      target: 'node',
      stats: {warnings:false},
      externals: [nodeExternals()],
      entry: {
          '/server/bundle-server': ['core-js','regenerator-runtime/runtime','./app/serverside/server.js'],
      },
      output: {
          path: path.resolve(__dirname, 'build/dev'),
          filename: '[name].js',
      },
      plugins: [],
      module: {
          rules: [
              {
                test: /\.(jsx|js)$/,
                include: path.resolve(__dirname, '/'),
                exclude: /node_modules/,
                use: [{
                  loader: 'babel-loader',
                }]
              },
          ]
      }
    }
  ]
  </code></pre>
  <p>my express server file:</p>
  <pre><code>import express from 'express';
  import serverRenderer from './renderSSR.js';
  import cors from 'cors';
  let app = express();
  
  app.use(cors());
  app.use(express.urlencoded({extended:false}));
  app.use(express.json());
  
  app.get('/', (req, res) =&gt; {
      res.status(200).send(serverRenderer());
  }); // when the user connect to the root of the server we send the page
  
  app.listen(8080,  () =&gt; console.log(&quot;Example app listening on port 8080!&quot;));
  </code></pre>
  <pre><code>import { renderToString } from 'react-dom/server';
  import fs from 'fs'; 
  import App from '../src/App.jsx';
  
  export default function serverRenderer() {
      return (req, res, next) =&gt; {
          const html = renderToString( // on rend côté serveur du pur HTML
              &lt;StaticRouter location={req.url}&gt;
                  &lt;App/&gt;
              &lt;/StaticRouter&gt;
          );
          // we read the index.html page and we change the div to insert the app content
          fs.readFile('../html/index.html', 'utf8', function (err,data) {
              if (err) {
                return console.log(err);
              }
              // after succefuly read the html file, we insert the App component content
              var htmlApp = data.replace('&lt;div id=&quot;app&quot;&gt;','&lt;div id=&quot;app&quot;&gt;' + html);
              return htmlApp;
          });
      };
  }
  </code></pre>
  <p>my client file:</p>
  <pre><code>// principal programme côté client, est capable de faire du rendue HTML, sera appelé une deuxième par le client.
  import * as React from 'react';
  import ReactDOM from 'react-dom';
  import {BrowserRouter as Router} from 'react-router-dom';
  
  import App from '../src/App.jsx';
  
  ReactDOM.render(
      &lt;Router&gt;
          &lt;App/&gt;
      &lt;/Router&gt;,
      document.getElementById('root')
  ); // on rend le react dans l'element HTML root
  </code></pre>
  <p>and finally my commun App file:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  export default function App(props)
  {
      return (
        &lt;p&gt;Hello App!&lt;/p&gt;
      )
  };
  </code></pre>
  <p>Where does the problem come from?
  How to fix it?
  Thanks in advance for your responses.</p>