Two or more css modules import return error Uncaught ReferenceError: __content_placeholder__ is not defined

[adityasingh773]

"esbuild": "^0.20.2",
"esbuild-css-modules-plugin": "^3.1.1"

The plugin works fine when I have a single index.module.css file in my project with setting inject: true

But as soon as I add two or more css modules in my project, my build fails and I get this error:
Uncaught ReferenceError: __content_placeholder__ is not defined

When I look at output js file, I see this:

  // esbuild-css-modules-plugin-ns-js::src/index.module.css:injector.js
  var content2 = __content_placeholder__;
  var digest2 = __digest_placeholder__;

which explains why I get the error. But I am not sure how to fix it.

I have created a public repository with two branches to easily replicate the behaviour.

1. Working version with just 1 css module file
2. Version with error when I add 1 more css module file

[indooorsman]

Thanks you very much for the repository to reproduce your issue, that will be very helpfull, I will look into it later

[indooorsman]

Hi @adityasingh773 , Please try v3.1.2

[adityasingh-anyline]

Thank you @indooorsman , v3.1.2 fixes the issue.

[adityasingh-anyline]

@indooorsman , the issue persists if we change esbuild config from await esbuild.build(...) to await esbuild.context(...)

[indooorsman]

@indooorsman , the issue persists if we change esbuild config from await esbuild.build(...) to await esbuild.context(...)

I've tested await ctx.watch() and it works

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();

[adityasingh773]

Can you try deleting public/build/index.js and public/build/index.css and then rebuild => reload => check browser console

[indooorsman]

Can you try deleting public/build/index.js and public/build/index.css and then rebuild => reload => check browser console

rebuild works as well

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.rebuild();

[adityasingh773]

@indooorsman , I created a new branch to replicate the behaviour.

Here, i serve a local directory using ctx.watch() and ctx.serve() and then navigate to localhost:8000 from a browser. When I open browser console i see the same original error.

[lpillonel]

I'm facing the same (?) issue :

• when I run the build command, it's fine
• but with ctx.watch() & ctx.serve(), the .js file generated and served is not the same as the one on the filesystem : the placeholder values are not interpolated.

This issue might be the reason actually :
evanw/esbuild#3101