Making `pack:web` work by adding polyfill (#2678)

* Making `pack:web` work

* Removing unnecessary extra line

* Ran `yarn install` to update the lock file

* I'm pretty sure that my lockfile was dirty

* Fixing an incorrect dependency resolution

`buffer` doesn't have to be included through browserify

_scripts/webpack.web.config.js

@@ -15,7 +15,7 @@ const isDevMode = process.env.NODE_ENV === 'development'
 const config = {
   name: 'web',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
+  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
   entry: {
     web: path.join(__dirname, '../src/renderer/main.js'),
   },
@@ -23,6 +23,9 @@ const config = {
     path: path.join(__dirname, '../dist/web'),
     filename: '[name].js',
   },
+  externals: {
+    electron: '{}'
+  },
   module: {
     rules: [
       {
@@ -113,19 +116,18 @@ const config = {
     ]
   },
   node: {
-    __dirname: isDevMode,
+    __dirname: true,
     __filename: isDevMode,
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-    dns: 'empty'
   },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.PRODUCT_NAME': JSON.stringify(productName),
       'process.env.IS_ELECTRON': false
     }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
       filename: 'index.html',
@@ -147,6 +149,20 @@ const config = {
       images: path.join(__dirname, '../src/renderer/assets/img/'),
       static: path.join(__dirname, '../static/'),
     },
+    fallback: {
+      buffer: require.resolve('buffer/'),
+      dns: require.resolve('browserify/lib/_empty.js'),
+      fs: require.resolve('browserify/lib/_empty.js'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      net: require.resolve('browserify/lib/_empty.js'),
+      os: require.resolve('os-browserify/browser.js'),
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify'),
+      timers: require.resolve('timers-browserify'),
+      tls: require.resolve('browserify/lib/_empty.js'),
+      vm: require.resolve('vm-browserify')
+    },
     extensions: ['.js', '.vue', '.json', '.css'],
   },
   target: 'web',

package.json

@@ -54,6 +54,7 @@
     "@freetube/yt-trending-scraper": "^3.1.1",
     "@silvermine/videojs-quality-selector": "^1.2.5",
     "autolinker": "^4.0.0",
+    "browserify": "^17.0.0",
     "electron-context-menu": "^3.5.0",
     "http-proxy-agent": "^4.0.1",
     "https-proxy-agent": "^5.0.0",
@@ -63,6 +64,7 @@
     "marked": "^4.0.17",
     "nedb-promises": "^5.0.1",
     "opml-to-json": "^1.0.1",
+    "process": "^0.11.10",
     "rss-parser": "^3.12.0",
     "socks-proxy-agent": "^6.0.0",
     "video.js": "7.18.1",