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:
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