@machtwatch/react-script 1.2.11-alpha.32 → 1.2.11-alpha.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.32",
+  "version": "1.2.11-alpha.33",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -15,7 +15,6 @@
   },
   "files": [
     "bin",
-    "config",
     "scripts"
   ],
   "main": "./bin/react-script.js",
@@ -51,9 +50,10 @@
     "@babel/preset-react": "^7.17.12",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "13.0.0",
     "assets-webpack-plugin": "7.1.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^26.3.0",
@@ -64,7 +64,6 @@
     "browser-sync": "^2.26.7",
     "child_process": "^1.0.2",
     "compression-webpack-plugin": "^10.0.0",
-    "config": "^3.3.9",
     "core-js": "^3.23.3",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^4.0.0",
@@ -80,8 +79,6 @@
     "imagemin-webp-webpack-plugin": "^3.3.6",
     "intersection-observer": "^0.5.1",
     "jest": "^26.4.2",
-    "less": "^4.2.1",
-    "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^0.5.1",
     "null-loader": "^4.0.1",
@@ -90,11 +87,16 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.1.0",
     "postcss-loader": "^8.1.1",
+    "postcss-nested": "^6.0.1",
     "postcss-preset-env": "^7.7.1",
+    "process": "0.11.10",
     "promise": "^8.0.2",
     "purgecss-webpack-plugin": "^4.1.3",
+    "react": "18.3.1",
     "react-dev-utils": "^12.0.1",
-    "react-error-overlay": "6.0.9",
+    "react-dom": "18.3.1",
+    "react-error-overlay": "6.0.11",
+    "react-refresh": "0.18.0",
     "recluster": "^0.4.5",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^2.6.3",
@@ -103,7 +105,7 @@
     "speed-measure-webpack-plugin": "^1.5.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",
-    "stylelint-config-recommended-less": "^3.0.1",
+    "stylelint-config-recommended": "^14.0.1",
     "stylelint-webpack-plugin": "^5.0.1",
     "tailwindcss": "^3.4.17",
     "terser": "^5.14.1",

package/scripts/build.js

@@ -5,14 +5,18 @@ const run = require('./utils/run');
 const clean = require('./utils/clean');
 const copy = require('./utils/copy');
 const pkg = require('../package.json');
-const webpackConfig = require('./webpack.config');
+const paths = require('../config/paths');
+const { createRequire } = require('module');
+
+const requireApp = createRequire(`${paths.appPath}/package.json`);
+const { loadConfig } = requireApp('c12');
 
 /**
  * Compiles the project from source files into a distributable
  * format and copies it to the output (build) folder.
  */
 
-function bundle() {
+function bundle(webpackConfig) {
   return new Promise((resolve, reject) => {
     webpack(webpackConfig).run((err, stats) => {
       if (err) {
@@ -27,9 +31,15 @@ function bundle() {
 }
 
 async function build() {
-  await run(clean);
+  const { config } = await loadConfig({
+    cwd: paths.appPath,
+  });
+
+  const webpackConfig = await require('./webpack.config')(config);
+
+  await run(clean, config);
   await run(copy);
-  await run(bundle);
+  await run(bundle.bind(null, webpackConfig));
 
   if (process.argv.includes('--docker')) {
     cp.spawnSync('docker', ['build', '-t', pkg.name, '.'], { stdio: 'inherit' })

package/scripts/lib/webpackHotDevClient.js

@@ -10,38 +10,38 @@ const {
   stopReportingRuntimeErrors,
 } = require('react-error-overlay');
 
-setEditorHandler(errorLocation => {
-  const fileName = encodeURIComponent(errorLocation.fileName);
-  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
+// setEditorHandler(errorLocation => {
+//   const fileName = encodeURIComponent(errorLocation.fileName);
+//   const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
+// 
+//   fetch(
+//     // Keep in sync with react-dev-utils/errorOverlayMiddleware
+//     `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
+//   );
+// });
 
-  fetch(
-    // Keep in sync with react-dev-utils/errorOverlayMiddleware
-    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
-  );
-});
-
-hotClient.useCustomOverlay({
-  showProblems(type, errors) {
-    const formatted = formatWebpackMessages({
-      errors,
-      warnings: [],
-    });
-
-    reportBuildError(formatted.errors[0]);
-  },
-  clear() {
-    dismissBuildError();
-  },
-});
+// hotClient.useCustomOverlay({
+//   showProblems(type, errors) {
+//     const formatted = formatWebpackMessages({
+//       errors,
+//       warnings: [],
+//     });
+// 
+//     reportBuildError(formatted.errors[0]);
+//   },
+//   clear() {
+//     dismissBuildError();
+//   },
+// });
 
 hotClient.setOptionsAndConnect({
   name: 'client',
   reload: true,
 });
 
-startReportingRuntimeErrors({
-  filename: '/assets/client.js',
-});
+// startReportingRuntimeErrors({
+//   filename: '/assets/client.js',
+// });
 
 if (module.hot) {
   module.hot.dispose(stopReportingRuntimeErrors);

package/scripts/start.js

@@ -7,11 +7,13 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 
 const paths = require('../config/paths');
-const webpackConfig = require('./webpack.config');
+
 const run = require('./utils/run');
 const clean = require('./utils/clean');
+const { createRequire } = require('module');
 
-const config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
+const requireApp = createRequire(`${paths.appPath}/package.json`);
+const { loadConfig } = requireApp('c12');
 
 const { format } = run;
 
@@ -69,12 +71,18 @@ async function start() {
     return server;
   }
 
+  const { config } = await loadConfig({
+    cwd: paths.appPath,
+  });
+
+  const webpackConfig = await require('./webpack.config')(config);
+
   server = express();
   server.use(errorOverlayMiddleware());
   server.use(express.static(paths.appPublic));
 
   // Configure client-side hot module replacement
-  const clientConfig = webpackConfig.find(config => config.name === 'client');
+  const clientConfig = webpackConfig.find(c => c.name === 'client');
 
   clientConfig.entry.client = [path.resolve(`${__dirname}/lib/webpackHotDevClient`)]
     .concat(clientConfig.entry.client)
@@ -109,7 +117,7 @@ async function start() {
   );
 
   // Configure compilation
-  await run(clean);
+  await run(clean, config);
 
   const clientCompiler = webpack(clientConfig);
   const serverCompiler = webpack(serverConfig);
@@ -187,12 +195,14 @@ async function start() {
           checkForUpdate(true);
         }
       })
-      .catch(error => {
+      .catch(async error => {
         if (['abort', 'fail'].includes(app.hot.status())) {
           console.warn(`${hmrPrefix}Cannot apply update.`);
           delete require.cache[require.resolve(`${paths.appBuild}/server`)];
           // eslint-disable-next-line global-require, import/no-unresolved
-          app = require(`${paths.appBuild}/server`).default;
+          const bundle = require(`${paths.appBuild}/server`);
+          const loaded = bundle instanceof Promise ? await bundle : bundle;
+          app = loaded.default;
           console.warn(`${hmrPrefix}App has been reloaded.`);
         } else {
           console.warn(
@@ -223,7 +233,9 @@ async function start() {
 
   // Load compiled src/server.js as a middleware
   // eslint-disable-next-line global-require, import/no-unresolved
-  app = require(`${paths.appBuild}/server`).default;
+  const bundle = require(`${paths.appBuild}/server`);
+  const loaded = bundle instanceof Promise ? await bundle : bundle;
+  app = loaded.default;
   appPromiseIsResolved = true;
   appPromiseResolve();
 

package/scripts/test.js

@@ -9,32 +9,43 @@ process.on('unhandledRejection', err => {
 
 const jest = require('jest');
 const path = require('path');
+const { createRequire } = require('module');
 
 const createJestConfig = require('../config/jest/createJestConfig');
 const paths = require('../config/paths');
 
+const requireApp = createRequire(`${paths.appPath}/package.json`);
+const { loadConfig } = requireApp('c12');
+
 require('../config/env');
 
-let argv = process.argv.slice(2);
+async function start() {
+  const { config } = await loadConfig({ cwd: paths.appPath });
 
-if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
-  argv.push('--watchAll');
-}
+  let argv = process.argv.slice(2);
+
+  if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
+    argv.push('--watchAll');
+  }
 
-const jestConfig = createJestConfig(
-  relativePath => path.resolve(__dirname, '..', relativePath),
-  path.resolve(paths.appSrc, '..'),
-  paths.srcPaths
-);
+  const jestConfig = createJestConfig(
+    relativePath => path.resolve(__dirname, '..', relativePath),
+    path.resolve(paths.appSrc, '..'),
+    paths.srcPaths,
+    config
+  );
 
-argv.push(
-  '--config',
-  JSON.stringify(
-    jestConfig
-  )
-);
+  argv.push(
+    '--config',
+    JSON.stringify(
+      jestConfig
+    )
+  );
 
-const testEnvironment = 'jsdom';
-argv.push('--coverage', '--env', testEnvironment);
+  const testEnvironment = 'jsdom';
+  argv.push('--coverage', '--env', testEnvironment);
+
+  jest.run(argv);
+}
 
-jest.run(argv);
+start();

package/scripts/utils/clean.js

@@ -1,11 +1,9 @@
-const paths = require('../../config/paths');
-const config = require('config').util.loadFileConfigs(paths.appPath + '/config');
 const { cleanDir } = require('../lib/fs');
 
 /**
  * Cleans up the output (build) directory.
  */
-function clean() {
+function clean(config) {
   return Promise.all([
     cleanDir('build/*', {
       nosort: true,

package/scripts/webpack.config.js

@@ -17,11 +17,10 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
 const crypto = require('crypto');
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const paths = require('../config/paths');
 
-const config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
-
 const pkg = require(`${paths.appPath}/package.json`);
 const { name, version } = pkg;
 const topLevelFrameworkPaths = [];
@@ -56,6 +55,8 @@ const mode = isDevEnv ? 'development' : 'production';
 const isRuntimeDev = DEV_SERVER === 'true';
 const smp = new SpeedMeasurePlugin({ disable: !MEASURE });
 
+module.exports = async (config) => {
+
 console.log(
   `Building webpack project ${name}@${version}\n`,
   Object.entries({
@@ -150,6 +151,9 @@ const isModuleCSS = module => (
 // -----------------------------------------------------------------------------
 const webpackConfig = ({ isClient }) => ({
   mode,
+  experiments: {
+    topLevelAwait: true,
+  },
   cache: { type: 'filesystem' },
 
   output: {
@@ -167,9 +171,13 @@ const webpackConfig = ({ isClient }) => ({
       '@hooks': path.resolve(paths.appSrc, 'hooks'),
       '@components': path.resolve(paths.appSrc, 'components'),
       '@baseComponents': path.resolve(paths.appSrc, 'base_components'),
-      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
-      'react/jsx-runtime': 'react/jsx-runtime.js'
+      'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
+      'react/jsx-runtime.js': require.resolve('react/jsx-runtime'),
+      'react/jsx-dev-runtime.js': require.resolve('react/jsx-dev-runtime'),
+      ...(isClient ? { c12: false } : {}),
     },
+    conditionNames: ['import', 'require', 'node', 'default'],
   },
 
   resolveLoader: {
@@ -194,6 +202,7 @@ const webpackConfig = ({ isClient }) => ({
           babelrc: false,
           configFile: false,
           compact: isProdEnv,
+          isClient,
           cacheDirectory: true,
           cacheCompression: false,
           customize: path.resolve(__dirname, '../config/babel/babel-custom-loader.js'),
@@ -207,6 +216,9 @@ const webpackConfig = ({ isClient }) => ({
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto',
+        resolve: {
+          fullySpecified: false,
+        }
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -273,65 +285,56 @@ const webpackConfig = ({ isClient }) => ({
   stats: 'minimal'
 });
 
-const styleLoaders = ({ isClient }) => [
-  {
-    loader: 'css-loader',
-    options: {
-      modules: {
-        exportOnlyLocals: !isClient,
-        localIdentName: '[local]',
+  const styleLoaders = ({ isClient }) => [
+    {
+      loader: 'css-loader',
+      options: {
+        modules: {
+          exportOnlyLocals: !isClient,
+          localIdentName: '[local]',
+        },
+        importLoaders: 2,
       },
-      importLoaders: 2,
     },
-  },
-  {
-    loader: require.resolve('postcss-loader'),
-    options: {
-      postcssOptions: {
-        ident: 'postcss',
-        config: false,
-        plugins: [
-          [
-            'postcss-import',
-            {
-              addModulesDirectories: [
-                path.resolve(__dirname, '../node_modules'),
-                `${paths.appPath}/node_modules`
-              ],
-              root: `${paths.appSrc}/styles/`
-            }
-          ],
-          'tailwindcss/nesting',
-          'tailwindcss',
-          [
-            'postcss-preset-env',
-            {
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-              browsers: pkg.browserslist
-            }
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          ident: 'postcss',
+          config: false,
+          plugins: [
+            [
+              'postcss-import',
+              {
+                addModulesDirectories: [
+                  path.resolve(__dirname, '../node_modules'),
+                  `${paths.appPath}/node_modules`
+                ],
+                root: `${paths.appSrc}/styles/`
+              }
+            ],
+            require('tailwindcss/nesting')(require('postcss-nested')),
+            'tailwindcss',
+            'postcss-flexbugs-fixes',
+            [
+              'postcss-preset-env',
+              {
+                autoprefixer: {
+                  flexbox: 'no-2009',
+                },
+                stage: 3,
+                features: {
+                  'nesting-rules': false,
+                },
+                browsers: pkg.browserslist
+              }
+            ],
+            'postcss-modules-values',
           ],
-          'postcss-modules-values',
-          'postcss-flexbugs-fixes'
-        ],
+        },
       },
     },
-  },
-  {
-    loader: 'less-loader',
-    options: {
-      lessOptions: {
-        javascriptEnabled: true,
-        paths: [
-          `${paths.appSrc}/styles`,
-          `${paths.appPath}/node_modules/@machtwatch/react-ui`,
-        ],
-      }
-    },
-  },
-];
+  ];
 
 //
 // Configuration for the client-side bundle (client.js)
@@ -472,6 +475,7 @@ const clientConfig = {
       https: false,
       util: false,
       buffer: false,
+      assert: false,
     }
   },
   module: {
@@ -508,68 +512,58 @@ const clientConfig = {
                       root: `${paths.appSrc}/styles/`
                     }
                   ],
-                  'tailwindcss/nesting',
+                  require('tailwindcss/nesting')(require('postcss-nested')),
                   'tailwindcss',
+                  'postcss-flexbugs-fixes',
                   [
                     'postcss-preset-env',
                     {
                       autoprefixer: { flexbox: 'no-2009' },
                       stage: 3,
+                      features: {
+                        'nesting-rules': false,
+                      },
                       browsers: pkg.browserslist,
                     }
                   ],
                   'postcss-modules-values',
-                  'postcss-flexbugs-fixes',
                 ],
               },
             },
           },
         ],
       },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          ...styleLoaders({ isClient: true }).filter(
-            (loader) => loader.loader !== 'less-loader'
-          ),
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                javascriptEnabled: true,
-                paths: [`${paths.appSrc}/styles`],
-              },
-            },
-          },
-        ],
-      }
-    ]
-  },
-  plugins: [
-    ...baseClientConfig.plugins,
-    new StyleLintPlugin({
-      configFile: `${paths.appPath}/.stylelintrc.json`,
-      extensions: ['less'],
-      exclude: ['node_modules', 'coverage'],
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new SubresourceIntegrityPlugin(),
-    new LoadablePlugin({
-      writeToDisk: {
-        filename: paths.appBuild
-      },
-      outputAsset: false
-    }),
-    // Define free variables
-    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    new webpack.DefinePlugin({
-      CONFIG: JSON.stringify(config.globals),
-      'process.env.DEV_SERVER': isRuntimeDev,
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      'process.env.BROWSER': true,
-      __DEVTOOLS__: isVerbose  // <-------- DISABLE redux-devtools HERE
-    }),
+      ]
+    },
+    plugins: [
+      ...baseClientConfig.plugins,
+      new StyleLintPlugin({
+        configFile: `${paths.appPath}/.stylelintrc.json`,
+        extensions: ['css'],
+        exclude: ['node_modules', 'coverage'],
+      }),
+      isRuntimeDev && new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+      new SubresourceIntegrityPlugin(),
+      new LoadablePlugin({
+        writeToDisk: {
+          filename: paths.appBuild
+        },
+        outputAsset: false
+      }),
+      // Define free variables
+      // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+      new webpack.DefinePlugin({
+        'process.env.DEV_SERVER': isRuntimeDev,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        'process.env.BROWSER': true,
+        __DEVTOOLS__: isVerbose  // <-------- DISABLE redux-devtools HERE
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+      }),
 
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
@@ -676,83 +670,76 @@ const clientConfig = {
   devtool: isDevEnv && useSourceMap ? 'eval' : false,
 };
 
-//
-// Configuration for the server-side bundle (server.js)
-// -----------------------------------------------------------------------------
-const baseServerConfig = webpackConfig({ isClient: false });
-const serverConfig = {
-  ...baseServerConfig,
-  name: 'server',
-  target: 'node',
-  devtool: isDevEnv && useSourceMap ? 'eval' : false,
-  performance: false,
-  optimization: {
-    nodeEnv: false,
-    splitChunks: {
-      name: false,
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          chunks: 'all',
-          enforce: true
+  //
+  // Configuration for the server-side bundle (server.js)
+  // -----------------------------------------------------------------------------
+  const baseServerConfig = webpackConfig({ isClient: false });
+  const serverConfig = {
+    ...baseServerConfig,
+    name: 'server',
+    target: 'node',
+    devtool: isDevEnv && useSourceMap ? 'eval' : false,
+    performance: false,
+    optimization: {
+      nodeEnv: false,
+      splitChunks: {
+        name: false,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            chunks: 'all',
+            enforce: true
+          }
         }
-      }
-    },
-    minimize: isProdEnv,
-    minimizer: [
-      new TerserPlugin(),
-      new CssMinimizerPlugin()
-    ]
-  },
-  entry: {
-    server: [
-      path.resolve(__dirname, './utils/polyfills.js'),
-      `${paths.appSrc}/server.js`
-    ]
-  },
-  output: {
-    ...baseServerConfig.output,
-    path: paths.appBuild,
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-  },
-  module: {
-    ...baseServerConfig.module,
-    rules: [
-      ...baseServerConfig.module.rules,
-      {
-        test: /\.css$/,
-        use: styleLoaders({ isClient: false }).filter(
-          (loader) => loader.loader !== 'less-loader'
-        ),
-      },
-      {
-        test: /\.less$/,
-        use: styleLoaders({ isClient: false }),
       },
+      minimize: isProdEnv,
+      minimizer: [
+        new TerserPlugin(),
+        new CssMinimizerPlugin()
+      ]
+    },
+    entry: {
+      server: [
+        path.resolve(__dirname, './utils/polyfills.js'),
+        `${paths.appSrc}/server.js`
+      ]
+    },
+    output: {
+      ...baseServerConfig.output,
+      path: paths.appBuild,
+      filename: '[name].js',
+      libraryTarget: 'commonjs2',
+    },
+    module: {
+      ...baseServerConfig.module,
+      rules: [
+        ...baseServerConfig.module.rules,
+        {
+          test: /\.css$/,
+          use: styleLoaders({ isClient: false }),
+        },
+      ],
+    },
+    externalsPresets: { node: true },
+    externals: [
+      nodeExternals({
+        allowlist: [/^driver\.js/],
+      }),
+      /^\.\/assets\.json$/,
     ],
-  },
-  externalsPresets: { node: true },
-  externals: [
-    nodeExternals({
-      allowlist: [/^driver\.js/],
-    }),
-    /^\.\/assets\.json$/,
-  ],
-  plugins: [
-    ...baseServerConfig.plugins,
-    // Define free variables
-    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    new webpack.DefinePlugin({
-      CONFIG: JSON.stringify(config.globals),
-      'process.env.DEV_SERVER': isRuntimeDev,
-      'process.env.BROWSER': false,
-      __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
-    }),
-    // Do not create separate chunks of the server bundle
-    // https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
-    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
-  ].filter(Boolean),
+    plugins: [
+      ...baseServerConfig.plugins,
+      // Define free variables
+      // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+      new webpack.DefinePlugin({
+        'process.env.DEV_SERVER': isRuntimeDev,
+        'process.env.BROWSER': false,
+        __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
+      }),
+      // Do not create separate chunks of the server bundle
+      // https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
+      new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
+    ].filter(Boolean),
 
   node: {
     global: false,
@@ -763,4 +750,5 @@ const serverConfig = {
 
 let configs = smp.wrap([clientConfig, serverConfig]);
 
-module.exports = configs;
+  return configs;
+};

package/config/babel/babel-custom-loader.js

@@ -1,66 +0,0 @@
-module.exports = () => ({
-    customOptions({ transform_runtime, ...loader }) {
-      return {
-        loader,
-        custom: { ...transform_runtime }
-      };
-    },
-    config(cfg) {
-      return {
-        ...cfg.options,
-        presets: [
-          [
-            require('@babel/preset-env'),
-            {
-              modules: false,
-              useBuiltIns: 'usage',
-              corejs: '3.22'
-            }
-          ],
-          require('@babel/preset-react'),
-
-        ],
-        plugins: [
-          require('@babel/plugin-transform-runtime'),
-          require('@babel/plugin-proposal-function-bind'),
-          require('@babel/plugin-proposal-export-default-from'),
-          require('@babel/plugin-proposal-export-namespace-from'),
-          require('@babel/plugin-proposal-throw-expressions'),
-          require('@babel/plugin-syntax-dynamic-import'),
-          require('@babel/plugin-proposal-json-strings'),
-          require('@loadable/babel-plugin'),
-          [require('babel-plugin-transform-imports'), {
-            '@machtwatch/react-ui': {
-              transform: '@machtwatch/react-ui/lib/${member}',
-              preventFullImport: true
-            }
-          }],
-          [require('@babel/plugin-proposal-decorators'), {
-            legacy: true
-          }],
-          [require('@babel/plugin-proposal-optional-chaining'), {
-            loose: true
-          }],
-          [require('@babel/plugin-proposal-class-properties'), {
-            loose: true
-          }],
-          [require('@babel/plugin-proposal-private-methods'), { loose: true }],
-          [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
-          [require('babel-plugin-add-module-exports'), {
-            addDefaultProperty: true
-          }],
-          ...(cfg.options.compact ? [
-            require('@babel/plugin-transform-react-inline-elements'),
-            require('@babel/plugin-transform-react-constant-elements')
-          ] : []),
-          ...(cfg.options.plugins || [])
-        ],
-      };
-    },
-    result(result) {
-      return {
-        ...result,
-        code: `${result.code} \n// Generated by babel-custom-loader`
-      };
-    },
-  });

package/config/env.js

@@ -1,67 +0,0 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-const dotenvFiles = [paths.dotenv].filter(Boolean);
-const appDirectory = fs.realpathSync(process.cwd());
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({ path: dotenvFile })
-    );
-  };
-});
-
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-      }
-    );
-
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-};
-
-module.exports = getClientEnvironment;

package/config/jest/babelTransform.js

@@ -1,27 +0,0 @@
-'use strict';
-
-const babelJest = require('babel-jest');
-
-module.exports = babelJest.createTransformer({
-  babelrc: false,
-  presets: [
-    ['@babel/preset-react'],
-    ['@babel/preset-env', {
-      modules: 'auto',
-      useBuiltIns: 'entry',
-      corejs: 3,
-    }]
-  ],
-  plugins: [
-    require('@babel/plugin-transform-runtime'),
-    require('@babel/plugin-syntax-dynamic-import'),
-    require('@babel/plugin-proposal-export-default-from'),
-    require('babel-plugin-dynamic-import-node'),
-    [require('babel-plugin-transform-imports'), {
-      '@machtwatch/react-ui': {
-        transform: '@machtwatch/react-ui/lib/${member}',
-        preventFullImport: true
-      }
-    }]
-  ]
-});

package/config/jest/createJestConfig.js

@@ -1,88 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const merge = require('deepmerge');
-
-module.exports = (resolve, rootDir, srcRoots) => {
-  const toRelRootDir = f => '<rootDir>/' + path.relative(rootDir || '', f);
-  const extendedPath = path.join(process.cwd(), 'extended-jest.config.js');
-
-  let isExtendedConfigExisted = false;
-  let extendedConfig = {};
-
-  try {
-    isExtendedConfigExisted = fs.existsSync(extendedPath);
-  } catch (err) {
-    console.error(err.message);
-  }
-
-  if (isExtendedConfigExisted) {
-    try {
-      extendedConfig = require(extendedPath);
-    } catch (err) {
-      console.error(err.message);
-    }
-  }
-
-  const config = {
-    setupFiles: [resolve('scripts/utils/polyfills.js')],
-    testMatch: [
-      "<rootDir>/src/shared/**/*.(spec|test).{js,jsx,mjs}"
-    ],
-    collectCoverageFrom: [
-      "src/shared/**/*.{js,jsx,mjs}"
-    ],
-    coverageThreshold: {
-      global: {
-        branches: 80,
-        functions: 80,
-        lines: 80,
-        statements: 80
-      }
-    },
-    coverageReporters: [
-      "lcov",
-      "html"
-    ],
-    roots: srcRoots.map(toRelRootDir),
-    testEnvironment: 'node',
-    testEnvironmentOptions: {
-      url: 'http://localhost'
-    },
-    transform: {
-      '^.+\\.(js|jsx|mjs|cjs)$': resolve('config/jest/babelTransform.js'),
-      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
-      '^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve('config/jest/fileTransform.js'),
-    },
-    transformIgnorePatterns: [
-      '^.+\\.module\\.css$',
-    ],
-    moduleFileExtensions: [
-      'web.js',
-      'mjs',
-      'js',
-      'json',
-      'web.jsx',
-      'jsx',
-      'node',
-    ],
-    testPathIgnorePatterns: [
-      "/node_modules/",
-      "<rootDir>/tests/",
-      "<rootDir>/src/*.js",
-      "<rootDir>/graphql/"
-    ],
-    setupFilesAfterEnv: [resolve('config/jest/jest-setup.js'), '<rootDir>/jest-setup.js'],
-    verbose: true,
-  };
-
-  const combinedConfig = merge(config, extendedConfig);
-
-  if (rootDir) {
-    config.rootDir = rootDir;
-  }
-
-  return combinedConfig;
-};

package/config/jest/cssTransform.js

@@ -1,13 +0,0 @@
-'use strict';
-
-module.exports = {
-  process() {
-    return {
-      code: 'module.exports = {};'
-    };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/config/jest/fileTransform.js

@@ -1,23 +0,0 @@
-'use strict';
-
-const path = require('path');
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return {
-        code: `module.exports = {
-          __esModule: true,
-          default: ${assetFilename},
-          ReactComponent: () => ${assetFilename},
-        };`
-      };
-    }
-
-    return {
-      code: `module.exports = ${assetFilename};`
-    };
-  },
-};

package/config/jest/graphqlTransform.js

@@ -1,11 +0,0 @@
-'use strict';
-
-const loader = require('graphql-tag/loader');
-
-module.exports = {
-  process(src) {
-    return {
-      code: loader.call({ cacheable() {} }, src)
-    };
-  },
-};

package/config/jest/jest-setup.js

@@ -1,4 +0,0 @@
-import "@testing-library/jest-dom";
-import config from 'config';
-
-global.CONFIG = config.globals;

package/config/paths.js

@@ -1,48 +0,0 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-
-// Make sure any symlinks in the project folder are resolved:
-const appDirectory = fs.realpathSync(process.cwd());
-
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
-
-const useTemplate = appDirectory === fs.realpathSync(path.join(__dirname, '..'));
-
-if (useTemplate) {
-  module.exports = {
-    dotenv: resolveOwn('template/.env'),
-    appPath: resolveOwn('template/'),
-    appBuild: resolveOwn('template/build'),
-    appPublic: resolveOwn('template/public'),
-    appIndexJs: resolveOwn('template/src/index.js'),
-    appPackageJson: resolveOwn('template/package.json'),
-    appSrc: resolveOwn('template/src'),
-    appConfig: resolveOwn('template/config/default'),
-    appNodeModules: resolveOwn('template/node_modules'),
-  };
-} else {
-  module.exports = {
-    dotenv: resolveApp('.env'),
-    appPath: resolveApp('.'),
-    appBuild: resolveApp('build'),
-    appPublic: resolveApp('public'),
-    appPackageJson: resolveApp('package.json'),
-    appSrc: resolveApp('src'),
-    appConfig: resolveApp('config/default'),
-    appNodeModules: resolveApp('node_modules'),
-  };
-}
-
-module.exports.srcPaths = [module.exports.appSrc];
-module.exports.useYarn = fs.existsSync(path.join(module.exports.appPath, 'yarn.lock'));