How to make Browserify compatible with Blazor JavaScript Isolation?

[GeorgeS2019]

This works!!!

await jsRuntime.InvokeAsync<object>("dotNetToJsBrowserify.learnBrowserify", "message");

Bundle.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){

window.dotNetToJsBrowserify = {
    learnBrowserify: module.exports = function (message) {
        var unique = require('uniq');

        var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
        var obj = { "name" : "JohnJS", "age" : 30, "city" : "New York"  };
        console.log(message);
        console.log(unique(data));
        console.log(obj);
        return JSON.stringify(obj);
    }
};
},{"uniq":2}],2:[function(require,module,exports){
"use strict"

function unique_pred(list, compare) {

... more

module.exports = unique

},{}]},{},[1]);

HOWEVER, this fail to find dotNetToJsBrowserify.learnBrowserify

 IJSObjectReference  module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/Bundle.js");

await module.InvokeAsync<object>("dotNetToJsBrowserify.learnBrowserify", "message");

Still new to this, any suggestion how to make it right?

[simutaroman]

I'm not sure you can use module exporting inside the javascript objects this is wrong for isolated JS modules in Blazor

window.dotNetToJsBrowserify = {
    learnBrowserify: module.exports = function (message) {
        var unique = require('uniq');

[GeorgeS2019]

@simutaroman Thanks for replying. Can u suggest where I can go next to get Browserify, with require statements linking to NodeModules => To work with Blazor JS Isolation.

If U think in your view, the current Blazor JS Isolation will not able to handle that, Please share your view.

FYI => I found this, the plan to bridge the CSJ and ESM gap

[simutaroman]

I can't understand what is your goal. just use the browserify (or webpack or any other tool) to compile all your JS code into a single ESM compatible file and use it. If you need separate files for your Blazor components (that is called JS isolation in Blazor) just set up your configuration properly and compile different sources into corresponded js files for your Blazor components

[GeorgeS2019]

@simutaroman Thanks for positive feedback. I am new to what you have suggested. Now I will attempt to try that. I am sure my use case is relevant to people who are trying to make existing JavaScript libraries to work with Blazor