Adding Editor Js node module in custom app

Frappe Framework
1

Here’s what Im trying to do.

  1. Render Editor Js in a HTML field within a form.
  2. Store any output from editor js in a longtext field and use it to render next time form is loaded.

The problem im facing is that while trying to initialize the editor, if I try to import the editor using
import EditorJS from '@editorjs/editorjs';
Then I get the error
import declarations may only appear at top level of a module

I’ve tried to use the build configuration of v14. First I installed editorjs via npm. Then I went ahead with the following.

  1. Create a app_name.bundle.js in public/js folder
    Inside the bundle js file, I have the following code.
import "./knowledge_base.js"

knowledge_base.js in public/js folder contains the below code

import EditorJS from '@editorjs/editorjs';

const editor = new EditorJS({
    /** 
     * Id of Element that should contain the Editor 
     */
    holder: 'editorjs',
})

console.log('knowledge_base.js was executed')
  1. Create a webform include inside hooks.py as follows:
webform_include_js = {"Knowledge Base": "public/js/app_name.bundle.js"}

I ran bench build and there are some minified(?) files generated.

However, I think this knowledge_base.js file is never run.

How can I get it to run?

Or am I trying something completely different than what I should be doing?