This is my esbuild.config.js:
import { glob } from "glob";
import { execSync } from "child_process";
import path from "path";
import pino from "pino";
import pinoPretty from "pino-pretty";
import esbuild from "esbuild";
import { sassPlugin as sass, postcssModules } from "esbuild-sass-plugin";
const logger = pino({ level: "trace" }, pinoPretty());
const buildMode = process.env.MODE.trim();
/** @type {string[]} glob pattern for entry points */
const entries = (await glob("./src/**/*.{ts,tsx,json,scss}")).map(entry =>
path.resolve(import.meta.dirname, entry),
);
if (entries.length === 0) {
logger.error("No entry points found. Please check your glob pattern.");
process.exit(1);
}
try {
logger.info("Generating TypeScript declaration files...");
execSync("tsc", { stdio: "inherit" });
logger.info("TypeScript declaration files generated successfully.");
} catch (error) {
logger.error("Could not generate TypeScript declaration files!", error);
process.exit(1);
}
logger.info("Building React components with esbuild...");
esbuild
.build({
entryPoints: entries,
outbase: path.resolve(import.meta.dirname, "./src"),
outdir: path.resolve(import.meta.dirname, "./.dist"),
bundle: false,
minify: buildMode === "production",
sourcemap: true,
format: "esm",
target: ["esnext"],
jsx: "automatic",
loader: {
".ts": "ts",
".tsx": "tsx",
".scss": "css",
},
tsconfig: "./tsconfig.json",
preserveSymlinks: true,
plugins: [
sass({
transform: (source, dirname, filePath) => {
logger.debug(`Processing SCSS file: ${path.relative("./src", filePath)}`);
return postcssModules({
basedir: path.resolve(import.meta.dirname, "./src"),
scopeBehaviour: "local",
generateScopedName:
buildMode === "production" ? "[hash:base64:5]" : "[name]__[hash:base64:5]__[local]",
})(source, dirname, filePath);
},
importMapper: givenPath => {
const constructedPath = path.resolve(
import.meta.dirname,
givenPath.replace(/^@styles//, "./src/styles/"),
);
return constructedPath;
},
type: "css",
}),
],
splitting: false,
logLevel: "info",
})
.then(() => {
logger.info("Build completed successfully.");
})
.catch(() => process.exit(1));
My folder structure is as follows:
./src
/components
/hooks
/styles
I am currently trying to create a build process for my react library, that is supposed to be used in nextjs. When I am setting bundle to true, everything works correctly, but creates a seperate bundle for every file containing all its imports… That’s not my goal. My goal is to build the component and hook files such that they do not yet contain all the code they import in the pre build step and still import it after the build process.
That’s where the problem comes in… These are the imports I get when I build the project:
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import Flap from "@components/Flap";
import Drop from "@components/Drop";
import { RelativeMouseCoordiantesContext } from "@components/RelativeMouseCoordinates";
import Tooltip from "@components/Tooltip";
import useClassName from "@hooks/useClassName";
import styles from "./Button.module.scss";
as you can see, aliases are not resolved (which works correctly when setting bundle to true.), also ./Button.module.scss is not updated, also the esbuild-sass-plugin does not create any .css files in the ./.dist directory… which also works when bundle: true.
Does anyone have an idea what is going on here?
