'How do I use Webpack to get all files into one file?

I want to use Webpack to add a handler on React. My file package.json look like this:

{
 "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "dotenv": "^8.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-server": "webpack --config webpack.server.js --mode=production",
    "start-server": "node ./server-build/index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "jest-extended": "^0.11.5",
    "serverless-finch": "^4.0.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  }
}

The Webpack configuration file webpack.server.js looks like this:

const path = require("path");

module.exports = {
  entry: "./src/server/index.js",

  target: "node",

  externals: [],

  output: {
    path: path.resolve("server-build"),
    filename: "index.js",
    library: "index",
    libraryTarget: "umd",
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: "css-loader",
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
};

The Babel configuration file babel.config.js:

{
  "presets": [
               "@babel/preset-react",
               "@babel/preset-env"
             ]
}

The handler file index.js looks like:

import React from "react";
import ReactDOMServer from "react-dom/server";
import SSRApp from "../SSRApp";

const indexFile = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div>Rendered on Server</div>
  </body>
</html>`;

const handler = async function (event) {
  try {
  
    const app = ReactDOMServer.renderToString(<SSRApp  />);
    const html = indexFile.replace(
      '<div id="root"></div>',
      `<div id="root">${app}</div>`
    );
    return {
      statusCode: 200,
      headers: { "Content-Type": "text/html" },
      body: html,
    };
  } catch (error) {
    console.log(`Error ${error.message}`);
    return `Error ${error}`;
  }
};

export { handler };

After I run the npm run build-server the npm run start-server I get error:

steinko@Steins-MacBook-Pro frontend % npm run start-server

> [email protected] start-server
> node ./server-build/index.js

webpack://index/./src/server/index.js?:19
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(event) {
                                             ^

ReferenceError: regeneratorRuntime is not defined
    at eval (webpack://index/./src/server/index.js?:19:46)
    at eval (webpack://index/./src/server/index.js?:53:2)
    at Object../src/server/index.js (/Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:160:1)
    at __webpack_require__ (/Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:195:41)
    at /Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:247:37
    at /Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:250:12
    at webpackUniversalModuleDefinition (/Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:11:20)
    at Object.<anonymous> (/Users/steinko/development/ATMandBank/Bank/frontend/server-build/index.js:18:3)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

How do I fix this error?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How do I use Webpack to get all files into one file?

Sources

Related Questions