Fix vnext server build

5 files changed, 32 insertions, 52 deletions

diff --git a/package-lock.json b/package-lock.json
index c2120387..114eca7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,7 +77,8 @@
         "supertest": "^7.0.0",
         "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4"
+        "webpack-dev-server": "^5.0.4",
+        "webpack-node-externals": "^3.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -21037,6 +21038,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/webpack-node-externals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
+      "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
diff --git a/package.json b/package.json
index f4370f94..b8c48d0f 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "eslint src/main/assets",
     "vnext:build": "webpack -c vnext/webpack.config.js --mode production --progress",
     "vnext:build:ssr": "npm run vnext:build && webpack -c vnext/server/webpack.config.js --mode production",
-    "vnext:start-ssr": "npm run vnext:build:ssr && cross-env DEBUG=http node --enable-source-maps public/server.js",
+    "vnext:start-ssr": "npm run vnext:build && webpack -c vnext/server/webpack.config.js --mode development && cross-env DEBUG=http node --enable-source-maps public/server.js",
     "vnext:start": "webpack serve -c vnext/webpack.config.js --mode development",
     "vnext:lint": "eslint vnext",
     "bridge:build": "webpack -c bridge/webpack.config.js --mode production"
@@ -62,7 +62,8 @@
     "supertest": "^7.0.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.0.4",
+    "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
     "axios": "^1.7.5",
diff --git a/src/main/assets/icon.js b/src/main/assets/icon.js
index 5cd787a5..b4b5aedc 100644
--- a/src/main/assets/icon.js
+++ b/src/main/assets/icon.js
@@ -1,10 +1,10 @@
-import evilIcons from 'evil-icons/assets/sprite.svg'
+const spritesUrl = new URL('evil-icons/assets/sprite.svg', import.meta.url)
 
 function icon(name, { size = '', className = '' }) {
   const classes = `icon icon--${name} icon--${size} ${className}`.trim()
 
   var icon =  '<svg class="icon__cnt">' +
-                `<use xlink:href='${evilIcons}#${name}-icon' />` +
+                `<use xlink:href='${spritesUrl}#${name}-icon' />` +
               '</svg>'
 
   var html =  '<div class="' + classes + '">' +
diff --git a/vnext/server/webpack.config.js b/vnext/server/webpack.config.js
index 9ffb3360..78c90050 100644
--- a/vnext/server/webpack.config.js
+++ b/vnext/server/webpack.config.js
@@ -1,21 +1,17 @@
-const ESLintPlugin = require('eslint-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
+const nodeExternals = require('webpack-node-externals')
+const path = require('path')
 
-module.exports = () => {
-  const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development'
-  const dev = node_env !== 'production'
-  const config = {
-    mode: node_env,
-    devtool: dev ? 'cheap-module-source-map' : false,
+module.exports = {
+    devtool: false,
     entry: {
       'server': [
-        __dirname + '/index.js'
+        path.resolve(__dirname, 'index.js')
       ]
     },
     target: 'node',
     output: {
-      path: __dirname + '/../../public',
-      filename: '[name].js'
+      path: path.resolve(__dirname, '../../public'),
+      filename: '[name].js',
     },
     module: {
       rules: [{
@@ -26,7 +22,8 @@ module.exports = () => {
         loader: 'babel-loader'
       }, {
         test: /\.(png|jpe?g|gif|svg)$/i,
-        type: 'asset/resource'
+        type: 'asset/resource',
+        dependency: { not: ['url'] },
       }]
     },
     plugins: [
@@ -34,37 +31,9 @@ module.exports = () => {
     resolve: {
       symlinks: false,
       extensions: ['.js']
-    }
-  }
-  if (dev) {
-    config.plugins.push(
-      new ESLintPlugin({
-        files: __dirname + '/src',
-        lintDirtyModulesOnly: true,
-        failOnWarning: false,
-        failOnError: true,
-        fix: false
-      }))
-    config.devServer = {
-      hot: true,
-      historyApiFallback: true,
-      client: {
-        overlay: {
-          runtimeErrors: true
-        }
-      }
-    }
-  }
-  config.optimization = {
-    minimize: !dev,
-    minimizer: [
-      new TerserPlugin({
-        minify: TerserPlugin.swcMinify,
-        // `terserOptions` options will be passed to `swc` (`@swc/core`)
-        // Link to options - https://swc.rs/docs/config-js-minify
-        terserOptions: {},
-      }),
-    ]
+    },
+    externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc.
+    externals: [nodeExternals({
+      allowlist: [/\.(?!(?:jsx?|json)$).{1,5}$/i]
+    })],
   }
-  return config
-}
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
index bc5ce08a..19f1387c 100644
--- a/vnext/src/ui/Icon.js
+++ b/vnext/src/ui/Icon.js
@@ -1,7 +1,7 @@
 import { createElement, memo } from 'react'
 import PropTypes from 'prop-types'
 
-import evilIcons from 'evil-icons/assets/sprite.svg'
+const spritesUrl = new URL('evil-icons/assets/sprite.svg', import.meta.url)
 
 /**
  * @typedef {object} IconProps
@@ -21,7 +21,7 @@ function IconElement(props) {
     var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className
 
     var name = '#' + props.name + '-icon'
-    var useTag = `<use xlink:href='${evilIcons}${name}' />`
+    var useTag = `<use xlink:href='${spritesUrl}${name}' />`
     var Icon = createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } })
     return createElement(
         'div',