indooorsman / esbuild-css-modules-plugin

A esbuild plugin to bundle css modules into js(x)/ts(x)
MIT License
91 stars 16 forks source link

Uncaught ReferenceError: __content_placeholder__ is not defined #73

Closed adityasingh773 closed 4 months ago

adityasingh773 commented 4 months ago

I am using basic esbuild setup with a single index.js and .index.module.css file

My esbuild config looks like so:

import * as esbuild from 'esbuild';
import CssModulesPlugin from 'esbuild-css-modules-plugin';

const ctx = await esbuild.context({
    outfile: 'public/build/index.js',
    entryPoints: ['src/index.js'],
    bundle: true,
    platform: 'browser',
    target: ['es2015'],
    format: 'iife',
    globalName: 'Demo',
    metafile: true,
    plugins: [
        CssModulesPlugin({
            inject: true
        }),
    ]
});

await ctx.watch();
await ctx.serve({
    servedir: 'public',
});

And then I am importing the output index.js file in a public/index.html file like so

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Demo</title>
        <script src="./build/index.js"></script>
    </head>
    <body>
        <script type="text/javascript">
                try {
                    const init = Demo.default();
                } catch (e) {
                    console.log("Error", e);
                }
        </script>
    <div id="sdk"></div>
    </body>
</html>

Here the script src /build/index.js is what esbuild generates from my src/index.js file which looks like this

import css from './index.module.css'

export default function init() {
    const doc = document.createElement("div");
    doc.innerHTML = "Hello world";
    doc.className = css.doc;
    document.body.appendChild(doc);
}

I expected my CSS from index.module.css to be injected in my index.html file upon build but when I build my code and open localhost:8000, I do see my index.html being served but also this error in the console of browser

Uncaught ReferenceError: __content_placeholder__ is not defined