[tsdx-config] Rollup Image Plugin

[vongohren]

Current Behavior

I just wanted to add image plugin: https://github.com/rollup/plugins/tree/master/packages/image

const image = require('@rollup/plugin-image');

module.exports = {
  // This function will run for each entry/format/env combination
  rollup(config, options) {
    config.plugins.push(image(),);
    return config; // always return a config.
  },
};

Just like explained in the docs for customization: https://github.com/jaredpalmer/tsdx#rollup
The image is quite simple
But this happens:

Error: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

at /location/assets/images/logo_brandmark.png:1:0

1: �PNG
   ^

Expected behavior

That it works and the image becomes base64 imported.

Suggested solution(s)

Not really sure

Additional context

Should be straight forward since we tap into the rollup config.

Your environment

Software	Version(s)
TSDX	0.12.0
TypeScript	3.7.3
Browser	N/A
npm/Yarn	1.15.2
Node	10.15.1
Operating System	MacOS

[swyxio]

interesting. can you trace this error please? we are probably using an incompatible plugin somewhere higher up.

[vongohren]

@sw-yx what is the best way of tracing it?

[swyxio]

go into rollup's code, add a breakpoint or debugger statement somewhere, step through until you get the error? im not an expert but that's how i do it. its surprisingly powerful.

https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_attaching-to-nodejs

[vongohren]

@sw-yx I think I just dont know what too look for 😄 Im using ndb to get a debugging window and stepping through, the picture is when I got the error, not sure what to look for there? Tried stepping back in the callstack without becoming any smarter.

Got any other good suggestions? If not its just to add this plugin into a demo repo, and import a png to test out 😸

[vongohren]

It seems like there is a conncetion with this issue: #278 And there is a workaround there

[swyxio]

ok.. does that work for you?

[vongohren]

I have not tried yet :D Got a differnt problem to tackle first :P

[vongohren]

@sw-yx it worked.

I did this, so using a different lib than the suggested from his comment.

const images = require('@rollup/plugin-image');

module.exports = {
  rollup(config, options) {
    config.plugins = [
      images({ incude: ['**/*.png', '**/*.jpg'] }),
      ...config.plugins,
    ]

    return config
  },
}

[vongohren]

Closing based on these cases: #278 & #379

[swyxio]

great.