ERPNext Conference 2019* ERPNext.com Blog

How to add a node module to a custom app?


#1

I wanted to fiddle around with Vue GUI frameworks (Vuetify, Quasar and the likes) and successfully added the framework to the app, using CDN-like integration into a new page built with Page DocType as per here:

However, when I try to divide Vue+Quasar file into single-file components, buy app begins to fail building:

  1. Tried to compile it into my app’s bundle:
    hooks.py

    app_include_js = [
    “assets/js/my_app.min.js”, // <- Quasar is being build into my_app.min.js
    ]

build.json

{
  "js/my_app.min.js": [
    "public/js/export_tool/export_tool.js",
    "public/js/my_app.js",
    "public/node_modules/quasar/dist/quasar.umd.js"
  ]
}

Results in:

SyntaxError: Unexpected token (3278:4) in /home/frappe/frappe-bench/apps/frappe/node_modules/vue/dist/vue.runtime.esm.js

  1. Tried to link it directly:

hooks.py

app_include_js = [
	"assets/js/my_app.min.js",   // <- Quasar is being build into my_app.min.js,
	"assets/my_app/node_modules/quasar/dist/quasar.umd.min.js"
]

build.json

{
  "js/my_app.min.js": [
    "public/js/export_tool/export_tool.js",
    "public/js/my_app.js"
  ]
}

Results in:
SyntaxError: Unexpected token (2:8) 1 : { 2 : "name": "quasar",

I suspect this is a problem with the Rollup build configuration, but I fail to see how can I influence it apart from editing my app’s build.json.

Is there a way to fix this using app integration APIs? I really don’t want to edit core files.


#2

I finally managed to add an node-distributed UI library to Vue, running in my custom app. The solution was simple, Rollup couldn’t find the imported files because the imports I used didn’t have .vue extension =)

The routine:

  • yarn add <libraryname>
  • either add library distribution .js to hooks.py's app_include_js
  • or add it to your app’s main .js via your apps build.json
  • use normal imports as per library’s docs
  • use full path imports (including the extension) if you import your custom modules, which use the library you need: import ExportWidget from './ExportWidget.vue'

Tested it with Quasar, Vuetify and Element-UI:

I found Element-UI the easiest to use with Frappe.