Include external ES modules in the bundle

1.4k views Asked by At

I'm getting an error when running esbuild complaining:

You can mark the path "hiom" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

This is my esbuild.config.build.js

#!/usr/bin/env node

const {files} = require("./esbuild.config.entry");
require("esbuild").build({
    entryPoints: [...files],
    bundle: true,
    minify: true,
    sourcemap: true,
    target: ["chrome100", "firefox100", "safari16.6.1", "edge100"],
    outdir: "./dist/static",
    logLevel: "info",
    loader: {
        ".woff": "file",
        ".woff2": "file",
        ".ttf": "file",
        ".svg": "file",
        ".png": "file",
        ".eot": "file"
    },
}).catch(() => process.exit(1))

and my package.json

{
    "name": "my-project",
    "version": "1.0.0",
    "description": "my project",
    "scripts": {
        "start": "./node_modules/.bin/concurrently --kill-others --names tsc,esbuild.config.start.js \\\"./esbuild.config.start.js\\\"",
        "build": "./node_modules/.bin/rimraf dist && ./esbuild.config.build.js"
    },
    "dependencies": {
        "hiom": "../../build/js/packages/hiom",
        "tslib": "2.6.2",
        "uhtml": "3.2.2"
    },
    "keywords": [],
    "private": true,
    "devDependencies": {
        "concurrently": "^8.2.1",
        "esbuild": "^0.19.4",
        "rimraf": "^5.0.5",
        "typescript": "^5.2.2"
    }
}

and I've tried with the other path as well:

    ...
    "dependencies": {
        "hiom": "../hi-server/build/dist/js/productionLibrary",
        "tslib": "2.6.2",
        "uhtml": "3.2.2"
    },
    ...

The error message says I need to mark hiom as external

#!/usr/bin/env node

const {files} = require("./esbuild.config.entry");
require("esbuild").build({
    external: ["hiom"],   <<<
    ...

Doing this makes the error go away, but now npm run build doesn't bundle the hiom package which now causes index.html to throw an error:

Uncaught Error: Dynamic require of "hiom/kotlin/my-project-applications-my-server" is not supported

The hiom library I'm trying to include is generated by KotlinJS, it's generating ES modules:

enter image description here

enter image description here

Snippet from build.gradle.kts:

    js(IR) {
        useEsModules()
        binaries.library()
        moduleName = "hiom"
        browser {
            testTask {
                enabled = false
            }
        }
        generateTypeScriptDefinitions()
    }

If I don't use the useEsModules, option and it generates normal CommonJS .js files, then ESBuild has no problem bundling the generated JS. But when it's ES modules, it complains that I need to mark it as external, which then causes it to be excluded.

What are my options to include these generated ES modules in my ES Build and eventually have it in my index.html?

EDIT:

I don't know if my tsconfig would be of any help:

{
    "compilerOptions": {
        "strict": true,
        "alwaysStrict": true,
        "strictNullChecks": true,
        "strictBindCallApply": true,
        "experimentalDecorators": true,
        "target": "ES2020",
        "module": "ES2020",
        "lib": [
            "DOM",
            "ES2020"
        ],
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
    }
}

EDIT: I've also tried switching the whole project to use esmodules. Not sure if I'm doing it correctly or not.

Udating package.json and setting:

"type": "module",

and changing esbuild.config.build.js

import {files} from "./esbuild.config.entry.js"

console.log("----------------------------------------")
console.log(files)
console.log("----------------------------------------")

import {build} from "esbuild"

build({
    format: "esm",
    entryPoints: [...files],
    bundle: true,
    minify: true,
    sourcemap: true,
    target: ["chrome100", "firefox100", "safari16.6.1", "edge100"],
    outdir: "./dist/static",
    logLevel: "info",
    loader: {
        ".woff": "file",
        ".woff2": "file",
        ".ttf": "file",
        ".svg": "file",
        ".png": "file",
        ".eot": "file"
    },
}).catch(() => process.exit(1))

The error still remains

0

There are 0 answers