Can't find variable 'require' for custom js in app

1

Hi all,

I’m trying to create a custom chart in a page. When trying to load a js file (in assets, I have run bench build), I get:
ReferenceError: Can't find variable:require

Here is the js file being loaded.

frappe.pages['advanced-sales-funnel'].on_page_load = function(wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: 'Advanced Sales Funnel',
		single_column: true
	});
	frappe.require("assets/analytics/js/chartjs/chart.js"); //Reference Error

	wrapper.sales_funnel = new AdvancedSalesFunnel(wrapper);

	frappe.breadcrumbs.add("Analytics");
}
2

@alec_ruizramon1

frappe.require is now async (synchronous calls are deprecated in javascript)

1 Like
3

@rmehta okay, thank you!!

4

Is charts js integrated with erpnext because unable to find function .require?

5

I have been using chart.js by serving it in the public folder of a custom app, and then using hooks to provide it in head.

1 Like
6

Yes did that but not helping. Anything else that can be done. Are dev and prod mode paths separate?

7

@alec_ruizramon1 will be cool if you can share how you did it.

9

Basically following steps were done by me:

  1. Charts js was downloaded from github
  2. All files were extracted within public folder of my custom app
  3. All *.js file entries were added within build.json
  4. Main js file was also included within hooks.py thereafter
  5. bench build was run inside frappe-bench directories finally

Error:

From front end when all js fles are being loaded by Frappe framework, while loading it throws an error in console output that: require is not a function, file chart.js
Error Line 1: require(‘./core/core.js’)();

10

Sorry for being brief yesterday.

Check here: https://github.com/aruizramon/frappe_analytics
also here: Calendar view for sales opportunity? - #8 by ericmachine88

Chart.js is in the public folder there, and used in analytics/analytics/page/ (both pages). Essentially by hooking into the built chart.js all of the classes and functions are exposed for you to use in the rest of Frappe. It isn’t the most ‘efficient’ because you end up including it in head (every page) but it’s the simplest way so far.

1 Like