assets compilation issue in production phoenix application by GrapesJS

We are using GrapesJS to allow users to design some static pages in our production application build with Phoenix . We are using brunch to install and deploy our assets . Our production site is having a high usage of server side template rendering for performance reasons. GrapesJS works locally well but in production there is an error which causes all of our server side rendering to go down. Here is the error we are getting :

Uncaught ReferenceError: f is not defined which is coming from f.exports=o as seen in the minified code below:

{s.delay(t,arguments,n)}),this},resume:function(){return s.delay(this._worker.resume,[],this._worker),this},pause:function(){return this._worker.pause(),this},toNodejsStream:function(e){if(s.checkSupport("nodestream"),"nodebuffer"!==this._outputType)throw new Error(this._outputType+" is not supported by this method");return new h(this,{objectMode:"nodebuffer"!==this._outputType},e)}},f.exports=o}).call(t,n(2).Buffer)},function(e,t,n)

Our package.json file looks like this:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "grapesjs": "~> 0.14.20",
    "grapesjs-preset-webpage": "~> 0.1.10",
    "grapesjs-plugin-filestack": "~> 0.1.1",
    "toastr": "~> 2.1.1",
    "grapesjs-lory-slider": "~> 0.1.5",
    "grapesjs-tabs": "~> 0.1.2"
  },
  "devDependencies": {
    "babel-brunch": "6.1.1",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    "uglify-js-brunch": "2.10.0"
  }
} 

Our brunch-config.js file:

// rest of the brunch config is here
npm: {
    enabled: true
   whitelist: ["grapesjs", "grapesjs-preset-webpage", "grapesjs-plugin-filestack", "toastr"],
    styles: {
      grapesjs: ["dist/css/grapes.min.css"],
      "grapesjs-preset-webpager": ["dist/grapesjs-preset-webpage.min.css"],
      "grapesjs-plugin-filestack": ["dist/grapesjs-plugin-filestack.css"],
      toastr: ["build/toastr.css"]
    },
    globals: {
      grapesjs: 'grapesjs',
      "grapesjs-plugin-filestack": 'grapesjs-plugin-filestack',
      "grapesjs-preset-webpage": 'grapesjs-preset-webpage',
      toastr: 'toastr',
      "grapesjs-lory-slider": "grapesjs-lory-slider",
      "grapesjs-tabs": "grapesjs-tabs"

    }
    
  }

Our app.js file :

import "phoenix_html"
import "grapesjs"
import "grapesjs-plugin-filestack"
import "grapesjs-preset-webpage"
import "toastr"
import "grapesjs-lory-slider"
import "grapesjs-tabs"

// Phoenix Channels for server side rendering and real time features

Removing GrapesJS solves all the problems we are having with server side rendering and Phoenix channels in production. Please let me know if there is anything I am required to do differently or more information is needed.