Fix: Resolve 'Buffer is not defined' error for mobile devices (android)

[onefckcps]

Fix: Resolve 'Buffer is not defined' error for browser/mobile compatibility

Problem:

This PR addresses a ReferenceError: Buffer is not defined that occurs when running the plugin in non-Node.js environments, such as Obsidian mobile (tested on Android) or potentially web browsers. This error prevents the plugin from loading or functioning correctly in these environments.

Solution:

The root cause appears to be the build configuration targeting or assuming a Node.js environment. This leads to issues when dependencies (potentially gray-matter or others involved in processing) rely on Node-specific globals like Buffer.

This PR adjusts the build configuration files (webpack.config.ts, tsconfig.json, package.json) to produce a build compatible with standard browser/JavaScript environments where Buffer is not natively available. The primary change involved ensuring the Webpack build does not explicitly target Node.js.

Testing:

Manually tested on an Android tablet where the error previously occurred consistently. After applying these changes and rebuilding, the plugin loads and functions without the Buffer reference error.

Related Issues:

(Optional: If this PR fixes an existing issue reported on the original repository, uncomment and replace #issue_number below)

[james-tindal]

Thanks.

What is the ts-node loader supposed to do?

Looks like markmap is depending on node:stream so we'll have to find a polyfill for that.

[onefckcps]

Hey!

You're right, I also tried reverting the build script back to just webpack --mode production to double-check. Without the ts-node loader, I consistently get the following error:

[webpack-cli] Failed to load '/home/simon/git/obsidian-mindmap-nextgen/webpack.config.ts' config [webpack-cli] TypeError: Unknown file extension ".ts"

Through a quick search I figured out:

When pnpm run build is executed, it ultimately tries to run the webpack.config.ts file to get the configuration for Webpack. However, Node.js (the runtime environment executing webpack-cli) cannot natively understand or execute TypeScript files directly, especially when the project is set to use ES Modules ("type": "module"). It expects JavaScript. This leads to the TypeError: Unknown file extension ".ts".

The ts-node/esm loader bridges this gap. It allows Node.js to transpile the TypeScript configuration file (webpack.config.ts) into JavaScript "on-the-fly" in memory. This way, Node.js can execute the configuration, retrieve the settings, and then Webpack can proceed with bundling the actual plugin source code from the src/ directory using the loaders defined within that configuration (like esbuild-loader).

So, it's specifically needed to handle the initial loading of the .ts config file itself by Node.js.

---

I am a newcomer to TypeScript, webpack, and Obsidian plugin development, so please correct me if I am wrong or if I misunderstand something :)

[james-tindal]

The latest version of Node supports a limited set of typescript features. Works fine for me.

How did you get Android Obsidian to run the unpublished plugin?
I've not been able to find an option to load unpublished plugins on iPhone.

[onefckcps]

I just compiled the project and moved the plugin files (main.js, manifest.js, style.css) in the plugin folder (.obsidian/plugins/obsidian-mindmap-nextgen/) and restarted the app.

For mobile debugging i have used this method: https://docs.obsidian.md/Plugins/Getting+started/Mobile+development#Android

That way i was able to see the console errors

[james-tindal]

Instead of polyfilling Buffer, I'm working on removing gray-matter. Will get this fixed as soon as I can. Thanks for pointing me in the right direction.