Webpack atomizer-plugins: images are broken after webpack build

[a-gunderin]

Issue: Images (jpg, png, webp) are broken after project build

Repo with bug: https://github.com/a-gunderin/webpack-starter/tree/bug-atomizer

There is minimal code to reproduce the issue.

1. install and generate dist

npm i
npm run build

2. open ./dist/img directory
3. try to open the SVG image => OK
4. try to open the PNG image => ERROR: image is broken

[redonkulus]

Thanks for the report. If you remove the atomizer plugin does the PNG work properly? I'm not sure why atomizer would affect that, unless there is some webpack conflict that is occurring.

Any webpack debug messages you can provide?

[a-gunderin]

Hello @redonkulus.
Yes, if I remove atomizer-plugins - everything works fine.
Here is issue where I found that atomizer-plugins is reason of breaking images:
webdiscus/pug-plugin#68

The strange atomizer-plugins does not work accurately and the image content is duplicated in the image file.
If you disable the atomizer, then images are generated correctly.

This is the atomizer-plugins bug. This plugin brake the binary images, but SVG is ok.
Please create an issue ticket by the atomizer-plugin.

Any webpack debug messages you can provide?

Nothing specific:

webpack-starter> npm run build

> [email protected] build
> webpack

assets by info 1.49 MiB [immutable]
  asset images/test.8c8061c2.png 880 KiB [emitted] [immutable] [from: src/images/test.png] (auxiliary name: index)
  asset images/test.96865863.webp 313 KiB [emitted] [immutable] [from: src/images/test.webp] (auxiliary name: index)
  asset images/test.b2a0a65c.jpg 279 KiB [emitted] [immutable] [from: src/images/test.jpg] (auxiliary name: index)
  asset svg/test.83714099.svg 52 KiB [emitted] [immutable] [from: src/svg/test.svg] (auxiliary name: index)
assets by chunk 963 bytes (name: index)
  asset index.html 862 bytes [emitted] (name: index)
  asset css/style.css?v=7a3c95d9 101 bytes [emitted] (name: index)
asset js/app.js?v=faed5c4a 5.01 KiB [emitted] (name: app)
Entrypoint index 963 bytes (1.49 MiB) = index.html 862 bytes css/style.css?v=7a3c95d9 101 bytes 4 auxiliary assets
Entrypoint app 5.01 KiB = js/app.js?v=faed5c4a
runtime modules 2.37 KiB 8 modules
cacheable modules 2.11 KiB (javascript) 1.49 MiB (asset)
  javascript modules 1.94 KiB
    modules by path ./src/js/*.js 355 bytes
      ./src/js/app.js 157 bytes [built] [code generated]
      ./src/js/test-1.js 99 bytes [built] [code generated]
      ./src/js/test-2.js 99 bytes [built] [code generated]
    ./src/pug/index.pug 1.07 KiB [built] [code generated]
    ./src/sass/style.sass 538 bytes [built] [code generated]
  asset modules 168 bytes (javascript) 1.49 MiB (asset)
    ./src/images/test.jpg 42 bytes (javascript) 279 KiB (asset) [built] [code generated]
    ./src/images/test.png 42 bytes (javascript) 880 KiB (asset) [built] [code generated]
    ./src/images/test.webp 42 bytes (javascript) 313 KiB (asset) [built] [code generated]
    ./src/svg/test.svg 42 bytes (javascript) 52 KiB (asset) [built] [code generated]
webpack 5.76.2 compiled successfully in 555 ms

[redonkulus]

I'll take a look as soon as I can. atomizer-plugins just uses the unplugin library to build framework wrappers, there might be some bug there that was introduced recently.

[a-gunderin]

Probably the problem is in the use of ESM modules.
I'll try to use CommonJS modules.

[redonkulus]

Ok, we need to support esm modules as well. Will take a look at that soon.