[HELP]: Font not loading when using with webpack - grapesjs is trying to load fonts with relative path

I am trying to load grapesjs editor in a simple html file and it does not load the grapesjs own icons or the fontawesome icons.

Now, I looked into these 2 issues #2320 and #1474 but they did not help me in resolving my problem, hence I am raising it.

Below is my source script (demo.js) which is then used by webpack to package it up as `bundle.js

import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';
import grapesjs from 'grapesjs';
import gjspresetwebpage from 'grapesjs-preset-webpage';

document.addEventListener("DOMContentLoaded", function (event) {
    const editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
        height: '300px',
        width: 'auto',
        storageManager: false,
        panels: {defaults: []},
        plugins: ['gjs-preset-webpage'],
        pluginsOpts: {
            'gjs-preset-webpage': {
            }
        },
    });
});

My webpack configuration is as below :

const path = require('path');
module.exports = {
    entry: {
        bundle: './assets/js/demo.js',
    },
    mode: 'development',
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                },
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js']
    },
};

I can see that when I run webpack to bundle everything, it creates the bundle.js and also outputs the font files .woff, .svg for both main and fontawesome icons etc.

But when I try to use them in my html, it always returns an error when trying to loading icons : downloadable font: download failed......... source: http://localhost/editor/fonts/fontawesome-webfont.woff2

One interesting thing I noticed is that the fonts are loading fine if I copy paste them into the same directory where my html for editor is located

i.e. the html file is at /public/editor/demo.html and the files output by webpack are located as /public/js/ (bundle.js and font files) - so if I copy font files to /public/editor/fonts/ it works fine.

So it seems to me that grapesjs is trying to load the font files at a location relative to my demo.html file i.e. /public/editor/fonts/.

If it matters or someone needs to look at, then below is my html code for the editor:

....
<script type="text/javascript" src="/js/edoc.js"></script>
<div style="margin-top: 200px;" class="panel__top">
    <div class="panel__basic-actions"></div>
</div>
<div id="gjs">
    <strong>Sample text</strong>
</div>
<style>
    <!-- styles from the Getting Started page -->
</style>
....

P.S. Apologies and ignore if I am not following ant conventions/best practices, etc. as I am new to webpack, npm, etc. Also I may be making a very trivial mistake, but I have already spent hours to figure how to resolve this problem

GrapesJS / grapesjs

[HELP]: Font not loading when using with webpack - grapesjs is trying to load fonts with relative path #2428