bugfix(mjml-browser): yarn build-browser

dazgreer · dazgreer · commit 508bebb44bcb · 2025-11-18T11:00:06.000+01:00
the build browser command was failing. This fixes it.
diff --git a/packages/mjml-browser/README.md b/packages/mjml-browser/README.md
@@ -1,18 +1,79 @@
-## MJML Browser build
+# MJML Browser
 
-This package allows MJML to be used client-side.
+Browser build of MJML - convert MJML to responsive HTML in the browser.
 
-### Usage
+## Build
 
-It can be used as the regular mjml package :  
+```bash
+yarn build
+```
+
+This creates `index.js` - a UMD bundle that can be used in any browser.
+
+## Usage
+
+### In Browser (UMD)
+
+```html
+<!doctype html>
+<html>
+  <body>
+    <div id="output"></div>
+
+    <script src="path/to/mjml-browser/index.js"></script>
+    <script>
+      const mjmlTemplate = `
+        <mjml>
+          <mj-body>
+            <mj-section>
+              <mj-column>
+                <mj-text>Hello World!</mj-text>
+              </mj-column>
+            </mj-section>
+          </mj-body>
+        </mjml>
+      `
+
+      // mjml returns a Promise
+      mjml(mjmlTemplate).then((result) => {
+        console.log(result.html)
+        document.getElementById('output').innerHTML = result.html
+      })
+    </script>
+  </body>
+</html>
+```
+
+### With Module Bundler
 
 ```javascript
-var mjml2html = require('mjml-browser')
+const mjml2html = require('mjml-browser')
+
+// Returns a Promise
+mjml2html(mjmlString, options).then((result) => {
+  console.log(result.html)
+})
 
-var result = mjml2html(mjml, options)
+// Or with async/await
+const result = await mjml2html(mjmlString, options)
+console.log(result.html)
 ```
 
-### Unavailable features  
+## Unavailable Features
+
+- `mj-include` tags are unavailable and will be ignored
+- Features involving the `.mjmlconfig` file are unavailable (no custom components)
+- HTML minification is disabled (htmlnano is stubbed out)
+- File system operations are not available
+
+## API
 
-- `mj-include` tags are unavailable and will be ignored.
-- features involving the `.mjmlconfig` file are unavailable, which means no custom components.
+The function returns a Promise that resolves to an object with:
+
+```javascript
+{
+  html: string,      // The generated HTML
+  errors: array,     // Array of validation errors
+  json: object       // MJML structure as JSON
+}
+```
diff --git a/packages/mjml-browser/index.js b/packages/mjml-browser/index.js
diff --git a/packages/mjml-browser/package.json b/packages/mjml-browser/package.json
@@ -1,37 +1,44 @@
 {
   "name": "mjml-browser",
+  "version": "5.0.0-alpha.4",
+  "license": "MIT",
   "description": "MJML: the only framework that makes responsive-email easy",
-  "version": "5.0.0-alpha.6",
-  "main": "lib/index.js",
-  "files": [
-    "lib"
+  "keywords": [
+    "email",
+    "mjml",
+    "responsive"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mjmlio/mjml.git",
-    "directory": "packages/mjml-browser"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mjmlio/mjml/issues"
-  },
-  "homepage": "https://mjml.io",
+  "author": "Maxime",
   "scripts": {
-    "clean": "rimraf lib",
     "build": "webpack"
   },
+  "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "assert": "^2.1.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "events": "^3.3.0",
+    "mjml": "^5.0.0-alpha.4",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.4",
+    "util": "^0.12.5"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-export-default-from": "^7.8.3",
-    "@babel/plugin-proposal-function-bind": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "babel-loader": "^8.0.6",
-    "rimraf": "^3.0.2",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "webpack": "^4.36.1",
-    "webpack-cli": "^3.3.6"
+    "@babel/core": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "babel-loader": "^8.4.1",
+    "babel-plugin-lodash": "^3.3.4",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.47.0",
+    "webpack-cli": "^3.3.12"
   }
 }
diff --git a/packages/mjml-browser/stubs/empty.js b/packages/mjml-browser/stubs/empty.js
@@ -0,0 +1,8 @@
+module.exports = {}
+module.exports.default = {}
+
+// Stub common properties that might be accessed
+if (typeof global !== 'undefined') {
+  global.process = global.process || {}
+  global.process.env = global.process.env || {}
+}
diff --git a/packages/mjml-browser/stubs/htmlnano.js b/packages/mjml-browser/stubs/htmlnano.js
@@ -0,0 +1,8 @@
+// Mock htmlnano for browser - just returns HTML unchanged
+module.exports = {
+  process: function (html, options) {
+    return Promise.resolve({ html: html })
+  },
+}
+
+module.exports.default = module.exports
diff --git a/packages/mjml-browser/webpack.config.js b/packages/mjml-browser/webpack.config.js
@@ -1,67 +1,136 @@
 const path = require('path')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
   mode: 'production',
-  entry: {
-    "mjml": ['../mjml/lib/index'],
-  },
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          ecma: 5,
-          keep_classnames: true,
-          keep_fnames: true,
-          compress: {
-            passes: 2,
-            keep_fargs: false,
-          },
-          output: {
-            beautify: false,
-          },
-          mangle: true,
-        },
-      }),
-    ],
-  },
+  entry: path.resolve(__dirname, '../mjml/lib/index'),
   output: {
-    library: 'mjml',
+    path: __dirname,
     filename: 'index.js',
-    path: path.resolve(__dirname, './lib'),
+    library: 'mjml',
     libraryTarget: 'umd',
     umdNamedDefine: true,
+    globalObject: 'typeof self !== "undefined" ? self : this',
+  },
+  performance: {
+    hints: false,
   },
   resolve: {
     alias: {
-      'path': path.resolve(__dirname, 'browser-mocks/path'),
-      'fs': path.resolve(__dirname, 'browser-mocks/fs'),
-      'uglify-js': path.resolve(__dirname, 'browser-mocks/uglify-js'),
+      // Existing aliases
+      stream: require.resolve('stream-browserify'),
+      'node:stream': require.resolve('stream-browserify'),
+      buffer: require.resolve('buffer/'),
+      'node:buffer': require.resolve('buffer/'),
+      path: require.resolve('path-browserify'),
+
+      // Node.js core modules that need polyfills
+      'node:crypto': require.resolve('crypto-browserify'),
+      'node:url': require.resolve('url/'),
+      'node:util$': require.resolve('util/'),
+      'node:assert': require.resolve('assert/'),
+      'node:events': require.resolve('events/'),
+      'node:zlib': require.resolve('browserify-zlib'),
+      'node:http': require.resolve('stream-http'),
+      querystring: require.resolve('querystring-es3'),
+      'node:querystring': require.resolve('querystring-es3'),
+
+      // Node.js modules that don't work in browser - stub them out
+      'node:util/types': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:http2': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:async_hooks': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:net': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:tls': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:perf_hooks': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:diagnostics_channel': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:console': path.resolve(__dirname, 'stubs/empty.js'),
+      'node:worker_threads': path.resolve(__dirname, 'stubs/empty.js'),
+
+      // File system modules that don't work in browser
+      fs: path.resolve(__dirname, 'stubs/empty.js'),
+      'fs/promises': path.resolve(__dirname, 'stubs/empty.js'),
+      child_process: path.resolve(__dirname, 'stubs/empty.js'),
+      module: path.resolve(__dirname, 'stubs/empty.js'),
+
+      // Optional dependency that's not needed
+      typescript: path.resolve(__dirname, 'stubs/empty.js'),
+
+      // Problematic dependencies - use specific stubs
+      prettier: path.resolve(__dirname, 'stubs/empty.js'),
+      cosmiconfig: path.resolve(__dirname, 'stubs/empty.js'),
+      htmlnano: path.resolve(__dirname, 'stubs/htmlnano.js'),
+
+      // Undici is not needed in browser - stub it out completely
+      undici: path.resolve(__dirname, 'stubs/empty.js'),
     },
   },
+  node: {
+    // Webpack 4 way to disable Node.js polyfills
+    fs: 'empty',
+    child_process: 'empty',
+    worker_threads: false,
+    net: 'empty',
+    tls: 'empty',
+  },
   module: {
+    exprContextCritical: false,
     rules: [
       {
-        test: /\.js$/,
-        exclude: path.join(__dirname, 'node_modules'),
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
+        test: /\.(js|mjs)$/,
+        exclude:
+          /node_modules\/(?!(cheerio|htmlparser2|domhandler|dom-serializer|domelementtype|domutils|entities|parse5|encoding-sniffer)\/).*/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
                 '@babel/preset-env',
+                {
+                  targets: { browsers: ['> 0.25%', 'not dead'] },
+                },
               ],
-              plugins: [
-                ["@babel/plugin-proposal-decorators", { "legacy": true }],
-                ["@babel/plugin-proposal-class-properties", { "loose" : true }],
-                "@babel/plugin-proposal-function-bind",
-                "@babel/plugin-proposal-export-default-from",
-              ],
-              babelrc: false,
-            },
+            ],
+            plugins: [
+              'lodash',
+              '@babel/plugin-proposal-class-properties',
+              '@babel/plugin-proposal-private-methods',
+              '@babel/plugin-proposal-optional-chaining',
+              '@babel/plugin-proposal-nullish-coalescing-operator',
+              '@babel/plugin-proposal-logical-assignment-operators',
+            ],
           },
-        ],
+        },
       },
-  	],
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        parallel: true,
+        sourceMap: false,
+        uglifyOptions: {
+          compress: {
+            drop_console: false,
+          },
+          output: {
+            comments: false,
+          },
+        },
+      }),
+    ],
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env': JSON.stringify({}),
+      'process.version': JSON.stringify('v18.0.0'),
+      'process.versions.node': JSON.stringify('18.0.0'),
+      'process.platform': JSON.stringify('browser'),
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
 }
diff --git a/yarn.lock b/yarn.lock
