Importing javascript module in both production and debug

Anvil Q&A
1

I’m trying to import a javascript module in Native Libraries for both the production custom domain environment and also in debug mode.

The javascript module is an Asset file in my app. I have tried a relative import path, which works when running from my custom domain, but does not work when running in debug mode.

Here’s my Native Library code:

<script type = 'module'>
  import * as design_tool from '/_/theme/design_tool.js';
 //add functions to window here

This works perfectly when running from my custom domain.

However, when I try to Run in new tab and open up Chrome DevTools, I can see it trying to load from

https://o27dwcsj4iukrpu5.anvil.app/_/theme/design_tool.js

whereas the full URL path of my debug app has the secret key after “.app” like this:

https://o27dwcsj4iukrpu5.anvil.app/RANDOMSECRETKEY12345

I’ve tried to programtically create the full path depending on the hostname but this causes other issues.

Does anyone have any ideas?

2

I figured out a solution to my problem that doesn’t directly address this but accomplishes the same functionality.

I decided to use the Anvil way of accessing a module from python (anvil.js.import_from):

if anvil.app.environment.name == 'Production':
   self.js_module = anvil.js.import_from('https://productionurl.com/_/theme/design_tool.js')
else:
   self.js_module = anvil.js.import_from('https://debugurl.com/LONGSECRETKEY/_/theme/design_tool.js')
1 Like
3

I honestly have no idea what the difference between your production and debug instances was tbh, but even if you get a more clear answer from someone else on the forum, I recommend you keep the import_from method of importing modules – I’ve always found it integrates better if you know you’re importing a module.

1 Like
4

Have you tried a relative import?

./_/theme/…

That should work inside a module type script.

You should also be able to do

self.js_module  = import_from(anvil.server.get_app_origin() + "/_/theme/design_tool.js")
1 Like
5

This works as well. Thanks