Fix Webpack 5 issues by adding polyfill

Author: majkpal

apps/website/docusaurus.config.ts

@@ -8,6 +8,8 @@ const apisidebarPath = './apisidebar.json';
 let hasAPIsidebar = existsSync(apisidebarPath);
 
 const plugins = [
+  require.resolve('./sitePlugin'),
+  ['docusaurus-node-polyfills', { excludeAliases: ['console']}],
   'docusaurus-plugin-sass',
   [
     'doc-docusaurus-rfg-plugin',

apps/website/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus api:gen && DOCUSAURUS_NO_DUPLICATE_TITLE_WARNING=false docusaurus start --no-open",
-    "build": "docusaurus api:gen && DOCUSAURUS_NO_DUPLICATE_TITLE_WARNING=false docusaurus build",
+    "build": "yarn workspace @doc/mdx-gen-cli build && yarn workspace doc-docusaurus-rfg-plugin build && docusaurus api:gen && DOCUSAURUS_NO_DUPLICATE_TITLE_WARNING=false docusaurus build",
     "build-docs": "doc-mdx-gen-cli docs",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus api:gen && docusaurus deploy",
@@ -46,6 +46,7 @@
     "@types/react-router-dom": "^5.3.3",
     "doc-docusaurus-rfg-plugin": "workspace:*",
     "doc-docusaurus-typedoc-plugin": "workspace:*",
+    "docusaurus-node-polyfills": "^1.0.0",
     "sass": "^1.93.2",
     "typedoc": "^0.28.14",
     "typescript": "^5.4.5"

apps/website/sitePlugin.js

@@ -0,0 +1,21 @@
+module.exports = function () {
+  return {
+    name: 'custom-docusaurus-plugin',
+    // eslint-disable-next-line
+    configureWebpack(config, isServer, utils) {
+      return {
+        resolve: {
+          alias: {
+            path: require.resolve('path-browserify')
+          },
+          fallback: {
+            fs: false,
+            http: require.resolve('stream-http'),
+            https: require.resolve('https-browserify'),
+            os: require.resolve('os-browserify/browser')
+          }
+        }
+      };
+    }
+  };
+}

doc-tools/doc-mdx-gen-cli/build.js

@@ -8,7 +8,7 @@ esbuild.build({
   platform: 'node',
   minify: false,
   define: {
-    __DEV__: 'false'
+    __DEV__: "false"
   },
   plugins: [
     alias({

package.json

@@ -11,6 +11,7 @@
   },
   "private": true,
   "scripts": {
+    "build-all": "node scripts/build_all.js",
     "build:css-processor": "yarn workspace @native-html/css-processor build",
     "build:transient-render-engine": "yarn workspace @native-html/transient-render-engine build",
     "build:render": "yarn workspace @native-html/render build",

scripts/build_all.js

@@ -0,0 +1,13 @@
+const { execSync } = require('child_process');
+
+const build_render_engine = 'yarn build:transient-render-engine'
+const build_css_processor = 'yarn build:css-processor'
+const build_render_html = 'yarn build:render-html'
+const build_pages = 'yarn workspace @doc/pages build'
+const build_website = 'yarn workspace website build'
+
+execSync(build_css_processor)
+execSync(build_render_engine)
+execSync(build_render_html)
+execSync(build_pages)
+execSync(build_website)