Can i use <script type="importmap"> in custom-component?

App Building
1

Setting up the following to use THREE.js in a custom-component results in an error. I need to use the latest version of an addon like dragcontol orbit, but I can't find the independent cdn version.

<script type="importmap">
    {
    "imports": {
      "three": "https://unpkg.com/three@0.162.0/build/three.module.js"
    }
  }
</script>

<div id="react"></div>

<script type="text/babel">
  import * as THREE from 'three';

VM4361:3 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:14
    at custom-components.cf9d1ac4.js:2:1101
2

Hello @finn,

Maybe this works;

When using THREE.js and its add-ons like OrbitControls in a Retool custom component, not all setups support the importmap and ES Module syntax. Instead, you can use the UMD (Universal Module Definition) versions of these libraries, which are better suited for environments where module resolution might not work as expected.

To include THREE.js and OrbitControls (or any other extensions) in your custom component, you would typically need separate <script> tags to load each script from a CDN. Unfortunately, not all add-ons are available as standalone UMD builds directly from THREE.js' GitHub or standard CDNs. For libraries that are hosted as part of THREE.js (like OrbitControls), they can be referenced from the examples/jsm directory in the THREE.js GitHub repository or a CDN that mirrors these files.

Since I cannot generate or search for updated CDNs, here's a general approach to include THREE.js and an add-on like OrbitControls:

  1. Include THREE.js: Directly include the UMD version of THREE.js from a CDN.

    <script src="https://unpkg.com/three@0.162.0/build/three.min.js"></script>

  2. Include OrbitControls: Since these are not always available as independent files on a CDN, you might need to download the module file from the THREE.js GitHub repo and then host it yourself or find a version hosted online. If you find a CDN version, include it similarly to the THREE.js script tag. However, adjust the path to point to OrbitControls.js.

  3. Access THREE and Add-ons: Since these are now loaded through <script> tags, you do not use import but instead access THREE and any extensions directly as globals.

<script>
  // Assuming OrbitControls is loaded after THREE.js, it would be accessible as follows.
  const camera = new THREE.PerspectiveCamera( ... );
  const renderer = new THREE.WebGLRenderer( ... );
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  // Continue with your THREE.js setup...
</script>

If specific version requirements for add-ons force you to use ES modules instead of UMD builds, consider setting up a build process using tools like Webpack or Rollup to bundle these dependencies into a format suitable for your environment.

In conclusion, you might need to adjust how you're including THREE.js and its add-ons to be compatible with Retool's custom component environment by using global script includes.

Hope this helps.

:grinning:

Patrick