Using app_include_js with import statement

[teharris1]

I have a custom app with Frappe only (No ERPNext). In my hooks.py I have added app_include_js = "/assets/custom_app/js/custom_app.bundle.js". And I have placed custom_app.bundle.js in custom_app/custom_app/public/js/custom_app.bundle.js. In that same folder I have config.js. In custom_app.bundle.js is this

import "./config"

However, I am receiving the following error:

Uncaught SyntaxError: Cannot use import statement outside a module (at custom_app.bundle.js:1:1)

Why can I not import here? I see Frappe and ERPNext use the same pattern, but it does not work with my custom app for some reason.

[Yamen_Zakhour]

Please check
https://docs.frappe.io/framework/user/en/basics/asset-bundling

Also read this,

How to handle the JS in custom app?

if i include the utils.js file in the app_include_js its working but my concern is its not added like that in other apps like frappe, erpnext, hrms. please suggest if you have any other approach this is the way I added app_include_js = [ "/assets/genreport/js/utils.js", # Make sure your utils file loading first "/assets/genreport/js/my_custom_app.bundle.js", "/assets/genreport/js/my_custom_service.js", ]

And,

How to add a node module to a custom app?

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, …