Rollup + Typescript + load image as base64

Question

Have a problem trying to preload image with Rollup. All the crap that should work just doesn't, have no clue why. Did anybody managed to make it working? Here is what I have in rollup.congig.js:

import image from 'rollup-plugin-image'
...
plugins: [
        image(),
        json(),
        resolve(),
        commonjs(),
        typescript({
            typescript: require('typescript'),
        }),
        (process.env.BUILD === 'production' ? terser() : {})

Here is what I have in the sources:

import CAR_IMAGE from "../resources/expand.png";

And in the end I get an error from rtp2 pluging which says:

semantic error TS 2307, cannot find a module "../resources/expand.png"

What is strange, that I'm getting the same with variety of other image-loading plugins for rollup. The path is correct, the image is there. I'm already going mad with this error =((

Update: here is the repository with this bug reproducible:

https://github.com/AntonPilyak/rollup-image-bug

Update 2: have created bugs:

https://github.com/rollup/rollup-plugin-url/issues/22

https://github.com/alwaysonlinetxm/rollup-plugin-img/issues/5

https://github.com/rollup/rollup-plugin-image/issues/10

How can it be SO crappy? =(((

Answer 1

Replace rollup-plugin-image package with this package in rollup.config.js.
And add something like this below in plugins

plugins: [
image({
  extensions: /\.(png|jpg|jpeg|gif|svg)$/,
  limit: 10000
}),........

Then create a file name declaration.d.ts in the root project. Add below snippet

declare module '*.png' {
    const value: any;
    export default value;
}

add this snippet in your tsconfig.json

"include": ["src","src/declaration.d.ts"],

Re-Run rollup in CLI. It will work!!?