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:

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)

I think it is because of the url on the eval argument:

webpack://isomorphic-react-redux-router-app/./app/serverside/server.js?:17:19

Having a relative path in the middle of the url is not good. Here are my webpack file:

const path = require('path');
require("core-js/stable");
require("regenerator-runtime/runtime");
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: ["url-loader", "file-loader"]
      },
        {
          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',
              }]
            },
        ]
    }
  }
]

my express server file:

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) => {
    res.status(200).send(serverRenderer());
}); // when the user connect to the root of the server we send the page

app.listen(8080,  () => console.log("Example app listening on port 8080!"));

import { renderToString } from 'react-dom/server';
import fs from 'fs'; 
import App from '../src/App.jsx';

export default function serverRenderer() {
    return (req, res, next) => {
        const html = renderToString( // on rend côté serveur du pur HTML
            <StaticRouter location={req.url}>
                <App/>
            </StaticRouter>
        );
        // 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('<div id="app">','<div id="app">'   html);
            return htmlApp;
        });
    };
}

my client file:

// 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(
    <Router>
        <App/>
    </Router>,
    document.getElementById('root')
); // on rend le react dans l'element HTML root

and finally my commun App file:

import React from 'react';
import ReactDOM from 'react-dom';

export default function App(props)
{
    return (
      <p>Hello App!</p>
    )
};

Where does the problem come from? How to fix it? Thanks in advance for your responses.

CodePudding user response：

The answer from Heiko TheiBen solve my problem. Thanks for your attention!