CORS error when importing JS module from a different domain to my current app

Anvil Q&A
1

Hi all,

I am playing with the 3d Christmas tree demo (3D Christmas Tree): Specifically I want to change the app so that instead of using the threejs library in/from native libraries, I’d like to import 3JS as a module, and I’d like to host the threejs module in a different anvil app.

First I created an anvil app to host the threejs files:

https://threejs.anvil.app/_/theme/node_modules/three/build/three.module.js

I then cloned the Christmas tree app (https://anvil-3d-tree.anvil.app) and tried to use this code to import the module:

THREE = anvil.js.import_from(‘https://threejs.anvil.app/_/theme/node_modules/three/build/three.module.js’)

I get this error:

ExternalError: TypeError: Failed to fetch dynamically imported module: https://threejs.anvil.app/_/theme/node_modules/three/build/three.module.js

If I import the files from local it works, i.e. this code works

THREE = anvil.js.import_from(‘./_/theme/node_modules/three/build/three.module.js’)

I did set “allow embedding of app” to true in both apps.

My question is, if I want to host JS module code in one app, and import them into a different app (domain) how do I do that?

Here’s a link to my project, the code in question is on line 12 of “Form1_copy”

Thanks!
Kendall

2

Is there a particular reason you want to do things this way?

If it were me, I’d probably use a cdn to access 3js via an import map in native libraries. This is great for generating the maps for you:

1 Like
3

e.g. Here’s what it suggests you might put into your native libs for 3js:

 <script type="importmap">
{
  "imports": {
    "3js": "https://ga.jspm.io/npm:3js@1.0.0/main.js"
  }
}
</script>

<!-- ES Module Shims import maps polyfills -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js" crossorigin="anonymous"></script>
1 Like
4

Hi Owen! Thanks for taking the time! ThreeJS has many other modules that can be loaded in addition to their main file (plugins/add-ons), and I have a number of apps that will be using them. I have also been writing some JS modules of my own, to be used among my apps, so I suspect I am trying to find a way to “centralize” things.

I will look at your share. Thanks!

5

If you prefer local files, you could use your centralised app as a dependency then you don’t need to import from the published url of the centralised app. Theme assets are merged with dependency assets and accessible in the same way. Put your assets in a folder in the centralised app and then import from "./_/theme/<my-folder>/<my-file>.js".

3 Likes
6

Awesome! Thanks Stu!

1 Like