ERPNext.com Frappe Cloud Support Partners Foundation Frappe School

Can't import external JS Library in Frappe App

So I wanted to import https://github.com/xeokit/xeokit-sdk into erpnext/frappe app

What I did:

  1. yard add @xeokit/xeokit-sdk
  2. Changed build.json to
{
	"concat:js/xeokit.min.js": [
		"node_modules/@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es.js"
	],
	"js/myapp.min.js": [
		"public/js/xeokit.js"
	]
}
  1. Added in hooks.py
app_include_js = [
	"/assets/js/xeokit.min.js",
	"/assets/js/myapp.min.js"
]
  1. Tried to import xeokit in myapp's public js
import { Viewer, XKTLoaderPlugin, NavCubePlugin, TreeViewPlugin, FastNavPlugin } from "@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";

frappe.provide("frappe.xeokit")

frappe.xeokit.Viewer = Viewer
frappe.xeokit.XKTLoaderPlugin = XKTLoaderPlugin
frappe.xeokit.NavCubePlugin = NavCubePlugin
frappe.xeokit.TreeViewPlugin = TreeViewPlugin
frappe.xeokit.FastNavPlugin = FastNavPlugin

This results in

Building myapp assets...

SyntaxError: Can not use keyword 'await' outside an async function (90022:27) in /workspace/development/mileone-bench/apps/myapp/node_modules/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js
✔ Built js/myapp.min.js
✨  Done in 5.66s
Done in 7.00s.

I also tried with these

import { Viewer, XKTLoaderPlugin, NavCubePlugin, TreeViewPlugin, FastNavPlugin } from "@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es.js";

which resulted in

SyntaxError: Unexpected token (16:416) in /workspace/development/mileone-bench/apps/myapp/node_modules/@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es.js

and this

import { Viewer, XKTLoaderPlugin, NavCubePlugin, TreeViewPlugin, FastNavPlugin } from "@xeokit/xeokit-sdk";

which resulted in

UNRESOLVED_IMPORT : '@xeokit/xeokit-sdk' is imported by ../myapp/myapp/public/js/xeokit.js, but could not be resolved – treating it as an external dependency
Cannot find some dependencies. You may have to run "bench setup requirements" to install them.

MISSING_GLOBAL_NAME : No name was provided for external module '@xeokit/xeokit-sdk' in output.globals – guessing 'xeokitSdk'
✔ Built js/myapp.min.js

After reading Tutorial: Adding node modules to Frappe I also tried

hooks.py

node_modules = {
	'xeokit': {
		'js': [
			'/assets/myapp/node_modules/@xeokit/xeokit-sdk/dist/xeokit-sdk.min.es.js'
		]
	}
}

app_include_js = [
	node_modules['xeokit']['js'][0],
]

This gives

Uncaught SyntaxError: Unexpected token 'export'

in console


What am i doing wrong?