Cannot import openbim-components in browser environment

[nicospor]

Describe the bug 📝

Hi, this isn't exactly a bug and it's not a feature request either, I would ask the community but the site is not working at the moment, at least for me. So I hope it's ok if I report this here.

I'm trying to set up a web application with IFC viewing and probably editing capabilities. For the client side, I have installed openbim-components with yarn, as well as three.js. As a first step, I've created an index.html file along with a main.js script as an entry point for the application. In the HTML file, I've included an import map that looks like this:

<script type="importmap">
        {
          "imports": {
            "three": "./vendor/three/build/three.module.js",
            "openbim-components": "./vendor/openbim-components/src/index.js"
          }
        }
</script>

I've mapped src/index.js for openbim-components because it's the only thing that to me looks like an entry point for the package (something that comes out of a build process, for example).

Then in main.js:

import * as THREE from 'three';
import * as OBC from 'openbim-components';

The import step for three.js succeeds, however I get this kind of errors when the browser tries to import openbim:

Loading module from “http://localhost:3000/vendor/openbim-components/src/base-types” was blocked because of a disallowed MIME type (“text/html”).

This is because openbim-components/src/index.js tries to read from folders (e.g. export * from "./base-types";) and the web server responds with a 404. I've tried with both Firefox and Vivaldi (so Chromium) and with both nginx and PHP's development server to serve the static files.

What is the correct way to import this package?

I've tried reading the documentation and I've also looked at the practical examples, but unfortunately I couldn't find a solution (at the moment the examples seem to not be working, see e.g.: https://thatopen.github.io/engine_components/src/core/SimpleScene/index.html that gives a 404).

Sorry if this is a trivial question.

Reproduction ▶️

No response

Steps to reproduce 🔢

1. Run yarn add three.js and yarn add openbim-components
2. Create a basic index.html file with this import map (assuming packages are installed in ./vendor):

 <script type="importmap">
         {
           "imports": {
             "three": "./vendor/three/build/three.module.js",
             "openbim-components": "./vendor/openbim-components/src/index.js"
           }
         }
 </script>

3. In index.html, after the import map, include a reference to a main.js entrypoint module script containing these lines at the top:

  import * as THREE from 'three';
  import * as OBC from 'openbim-components';

4. Launch a webserver to serve static files from the project's folder and open index.html with a browser, it should give errors resembling this in the console:

Loading module from “http://localhost:3000/vendor/openbim-components/src/base-types” was blocked because of a disallowed MIME type (“text/html”)

System Info 💻

System:
    OS: Linux 6.8 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 18.73 GB / 31.27 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.20.3 - /usr/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 10.1.0 - ~/.npm-global/bin/npm

Used Package Manager 📦

yarn

Error Trace/Logs 📃

No response

Validations ✅

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• [X] Check that this is a concrete bug. For Q&A join our Community.
• [X] The provided reproduction is a minimal reproducible example of the bug.