The module default object is empty in the scss file

[SangMinL96]

bundle.js

// src/components/Test.jsx
var import_react = __toESM(require_react());
var import_classnames = __toESM(require_classnames());

// src/components/Test.module.scss
var Test_module_default = {};

// src/components/Test.jsx
var classs = import_classnames.default.bind(Test_module_default);
function Test() {
  return /* @__PURE__ */ import_react.default.createElement("div", { className: classs("test_sangmin") }, "Testddd");
}
var Test_default = Test;

bundle.css

/* src/components/Test.module.scss */
._test_sangmin_13964_1 {
  color: red;
}
/*# sourceMappingURL=bundle.css.map */

Test.jsx

import classNames from "classnames";
import style from "./Test.module.scss";
const classs = classNames.bind(style);
function Test() {
  return <div className={classs("test_sangmin")}>Testddd</div>;
}

esbuild.config.js

ctx = await esbuild.context({
		entryPoints: ['src/index.jsx'],
		bundle: true,
		minify: false,
		sourcemap: true,
		format: "esm",
		loader: { '.svg': 'text' },
		outfile: 'public/static/bundle.js',
		plugins: [sassPlugin({
			async transform(source, resolveDir) {
				const { css } = await postcss([
					postcssModule(),
					postcssPresetEnv({ stage: 1 })
				]).process(source)
				return css
			}
		})
			,
		svgrPlugin()],
		define: {
			'process.env.NODE_ENV': "'development'"
		}
	});

	await ctx.watch();
	console.log('Watching client...');

	const { host, port } = await ctx.serve({
		servedir: 'public',
		fallback: 'public/index.html'
	});

I bind scss using the classnames library in react.
Css modules succeeded, but html classname is using the classnames library, so css modules do not proceed.
I checked the bundle.js file and found that "var Test_module_default = {}" was empty. Is there a way to fill this part?

[SangMinL96]

I'm sorry for asking you a hasty question. I have identified and resolved the issue #3295

I used that plug-in because I set it up for precomfile and alias using the build-sass-plugin plug-in. But with that plug-in, it didn't seem to be local-css loader.
After all, I made my own plug-in and the code below is the result.

ctx = await esbuild.context({
		entryPoints: ['src/index.jsx'],
		bundle: true,
		minify: false,
		format: "esm",
		loader: { '.svg': 'text', ".module.scss": "local-css", ".png": "dataurl" },
		outfile: 'public/static/bundle.js',
		plugins: [svgrPlugin(), {
			name: "esbuild-replace",
			setup: (build) => {
				build.onLoad({ filter: /.scss/ }, async (args) => {
					let content = await fs.promises.readFile(args.path, 'utf8')
					content = content.replace(/[/]public/, path.resolve(root, "public"))
					content = content.replace(/app/, path.resolve(root, "src/components"))
					content = content.replace(/\/\/.*/g, '');
					console.log(content)
					return { contents: content, loader: "local-css" }
				})
			}
		}],
		define: {
			'process.env.NODE_ENV': "'development'"
		}
	});

[evanw]

I'm closing this issue because it sounds like it's not a problem with esbuild. The local-css loader is the one that exports local class names in the file.