Compilation of versions 0.2.9, 0.2.10 and 0.2.11 fails with vite

[svieujot]

But it worked with 2.0.9.

[INFO] Could not resolve '../matrix/storage/idb/utils.js' from node_modules/hydrogen-web/src/logging/IDBLogger.js
[INFO] error during build:
[INFO] Error: Could not resolve '../matrix/storage/idb/utils.js' from node_modules/hydrogen-web/src/logging/IDBLogger.js
[INFO]     at error (/home/sylvain/git/com.seanergie.java.intranet/src/main/javascript/node_modules/rollup/dist/shared/rollup.js:151:30)
[INFO]     at ModuleLoader.handleResolveId (/home/sylvain/git/com.seanergie.java.intranet/src/main/javascript/node_modules/rollup/dist/shared/rollup.js:19862:24)
[INFO]     at /home/sylvain/git/com.seanergie.java.intranet/src/main/javascript/node_modules/rollup/dist/shared/rollup.js:19856:26
[INFO] error Command failed with exit code 1.
[INFO] error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[svieujot]

Sorry, it worked until 0.2.8 and fails for 0.2.9 onwards.

[DanilaFe]

Could you please share the steps to reproduce this? I see the issue and the cause, but would like to have a reliable way to test for more bugs of this sort.

[svieujot]

Here is my package.json:

{
    "name": "vue-components",
    "version": "0.0.0",
    "license": "SEE LICENSE IN /LICENSE.md",
    "private": true,
    "scripts": {
        "clean": "rm -rf node_modules",
        "dev": "vite",
        "test": "jest --env=jsdom",
        "build": "vite build"
    },
    "files": [
        "dist"
    ],
    "main": "./dist/my-lib.umd.js",
    "module": "./dist/my-lib.es.js",
    "exports": {
        ".": {
            "import": "./dist/my-lib.es.js",
            "require": "./dist/my-lib.umd.js"
        }
    },
    "dependencies": {
        "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.4.tgz",
        "@popperjs/core": "^2.10.1",
        "hydrogen-web": "vector-im/hydrogen-web#v0.2.8",
        "vue": "^3.2.12",
        "vue3-qr-reader": "^1.0.0"
    },
    "devDependencies": {
        "vite": "^2.5.8",
        "jest": "^27.2.0",
        "@vitejs/plugin-vue": "^1.6.2",
        "@vue/compiler-sfc": "^3.2.12",
        "eslint": "^7.32.0",
        "@babel/core": "^7.11.1",
        "@babel/preset-env": "^7.11.0",
        "@rollup/plugin-babel": "^5.1.0",
        "@rollup/plugin-commonjs": "^15.0.0",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-multi-entry": "^4.0.0",
        "@rollup/plugin-node-resolve": "^9.0.0",
        "autoprefixer": "^10.2.6",
        "cheerio": "^1.0.0-rc.3",
        "commander": "^6.0.0",
        "core-js": "^3.6.5",
        "fake-indexeddb": "^3.1.2",
        "finalhandler": "^1.1.1",
        "impunity": "^1.0.0",
        "mdn-polyfills": "^5.20.0",
        "node-html-parser": "^4.0.0",
        "postcss": "^8.1.1",
        "postcss-css-variables": "^0.17.0",
        "postcss-flexbugs-fixes": "^4.2.1",
        "postcss-import": "^12.0.1",
        "postcss-url": "^8.0.0",
        "regenerator-runtime": "^0.13.7",
        "rollup": "^2.26.4",
        "rollup-plugin-cleanup": "^3.1.1",
        "serve-static": "^1.13.2",
        "xxhashjs": "^0.2.2"
    }
}

Then I think adding any file that uses hydrogen should generate the same compilation error.

But for reference, my vue component that is being compiled is:

<template>
    <div ref="loader" class="loaderContainer">
        <div class="loader">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div ref="errorContainer" class="errorContainer">
        <i class="fas fa-unlink text-danger"></i>
    </div>
    <div ref="container" class="chatContainer hydrogen"></div>
</template>

<style scoped>
.loaderContainer {
    flex-grow: 100 !important;
    display: flex;
    justify-content: center;
    align-content: center;
}

.loader, .loader * {
    box-sizing: border-box;
}

.loader {
    display: block;
    margin: auto;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    perspective: 1454px;
}

.loader div {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.loader div:nth-child(1) {
    left: 0;
    top: 0;
    animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
    border-bottom: 6px solid var(--bs-dark);
}

.loader div:nth-child(2) {
    right: 0;
    top: 0;
    animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
    border-right: 6px solid var(--bs-dark);
}

.loader div:nth-child(3) {
    right: 0;
    bottom: 0;
    animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
    border-top: 6px solid var(--bs-dark);
}

@keyframes orbit-spinner-orbit-one-animation {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes orbit-spinner-orbit-two-animation {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes orbit-spinner-orbit-three-animation {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.loaderContainer {
    flex-grow: 100 !important;
    display: flex;
    justify-content: center;
    align-content: center;
}

.errorContainer {
    flex-grow: 100 !important;
    justify-content: center;
    align-content: center;
    display: none;
}

.errorContainer i {
    display: block;
    margin: auto;
    font-size: 10rem;
}

.chatContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    font-size: 1rem;
    min-height: 100px; /* Fix for chrome. See https://stackoverflow.com/questions/50691765/css-grid-grid-item-height-100-not-working-in-chrome/50691948 */
}
</style>

<style>
:root { /* TODO: Remove this rule when it is scoped in hydrogen theme */
    font-size: 14px;
}

.SessionView {
    position: inherit !important;
    flex: 1 1 auto;
    scrollbar-color: rgba(130, 130, 130, 0.9) white;
}

.SessionView a.button-utility.settings {
    display: none;
}

.SessionView img,
.SessionView svg {
    vertical-align: baseline;
}

.SessionView .RoomView .menu .destructive,
.SessionView .RoomView .room-options {
    display: none;
}

.SessionView .RoomView .room-description h2 {
    font-family: var(--bs-body-font-family);
    font-size: 1.5rem;
    font-weight: normal;
    white-space: normal;
}

.LeftPanel {
    font-size: 1.25rem;
    scrollbar-color: rgba(130, 130, 130, 0.9) rgba(245, 245, 245, 0.90);
}
</style>

<script lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {Platform} from "hydrogen-web/src/platform/web/Platform.js";
import {parseUrlPath, stringifyPath} from "hydrogen-web/src/domain/navigation/index.js";
import {Navigation} from "hydrogen-web/src/domain/navigation/Navigation";
import {URLRouter} from "hydrogen-web/src/domain/navigation/URLRouter";
import {SessionViewModel} from "hydrogen-web/src/domain/session/SessionViewModel";
import {SessionView} from "hydrogen-web/src/platform/web/ui/session/SessionView";
import {SessionContainer} from "hydrogen-web/src/matrix/SessionContainer";
import "hydrogen-web/src/platform/web/ui/css/main.css";
import "hydrogen-web/src/platform/web/ui/css/themes/element/theme.css";
import {PasswordLoginMethod} from "hydrogen-web/src/matrix/login/PasswordLoginMethod.js";
import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
import olmWasmLegacyBundlePath from "@matrix-org/olm/olm_legacy.js?url";
import olmWasmBundlePath from "@matrix-org/olm/olm.js?url";

export default {
    name: "MatrixChatPanel",

    props: {
        server: {
            required: true,
            type: String,
        },
        login: {
            required: true,
            type: String,
        },
        token: {
            required: true,
            type: String,
        },
    },

    setup(props) {
        const loader = ref(null);
        const errorContainer = ref(null);
        const container = ref(null);

        const platform = new Platform(
            document.body,
            {
                worker: "src/worker.js",
                downloadSandbox: "/wicket/resource/com.seanergie.intranet.entities.companies.communication.MatrixChatPanel/hydrogen/download-sandbox.html",
                defaultHomeServer: props.server,
                olm: {
                    wasm: olmWasmPath,
                    legacyBundle: olmWasmLegacyBundlePath,
                    wasmBundle: olmWasmBundlePath,
                }
            },
            null,
            {development: false});

        async function login() {
            try {
                const navigation = new Navigation(() => true);
                platform.setNavigation(navigation);

                const olmPromise = platform.loadOlm();
                const workerPromise = platform.loadOlmWorker();

                const sessionContainer = new SessionContainer({platform, olmPromise, workerPromise});
                const loginMethod = new PasswordLoginMethod({
                    homeserver: props.server,
                    username: props.login,
                    password: props.token
                });

                sessionContainer.startWithLogin(loginMethod).then(
                    () => {
                        try {
                            const urlRouter = new URLRouter({history: platform.history, navigation, parseUrlPath, stringifyPath});
                            urlRouter.attach();

                            const viewModel = new SessionViewModel({
                                sessionContainer,
                                urlCreator: urlRouter,
                                navigation,
                                platform,
                            });
                            viewModel.start();
                            const view = new SessionView(viewModel);
                            loader.value.style.display = "none";
                            container.value.appendChild(view.mount());
                        } catch (err) {
                            console.error(err);
                            loader.value.style.display = "none";
                            errorContainer.value.style.display = "flex";
                        }
                    }
                );
            } catch (err) {
                console.error(err);
                loader.value.style.display = "none";
                errorContainer.value.style.display = "flex";
            }
        }

        onMounted(login);
        onUnmounted(() => platform.dispose());

        return {
            loader,
            errorContainer,
            container,
        };
    }
};
</script>