doesn't work with Typescript

[AntonPilyak]

Works fine with plain JavaScript, but doesn't work with Typescript. Here is the repository for reproducing: https://github.com/AntonPilyak/rollup-image-bug

[Ashot-KR]

Error comes from typescript, not from url plugin.
I don't have much experience in typescript, but it looks like typescript compiler doesn't like importing images.

But you can use babel with @babel/preset-typescript – it works for me in your example.

import url from 'rollup-plugin-url'
import babel from 'rollup-plugin-babel'

export default [{
  input: 'bug-ts.ts',
  output: [
    {
      file: 'dist/bug-ts.js',
      name: 'BugTs',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**',
      extensions: ['.ts'],
      presets: ["@babel/preset-typescript"]
    }),
    url()
  ]
}]

[AntonPilyak]

Hi! That looks like a workaround, thanks for this solution, but still I think it should work out of the box with typescript2 plugin. Here is why:

1. plugins should be executed in the same order as the are listed in 'plugins' section.
2. the url plugin, theoretically, should replace the import statement to something like var myImage = 'base64encoding'; which is valid both in Typescript and Javascript, so, theoretically, Typescript2 plugin shouldn't know anything about importing or images in this case - it should just get the var definition. Am I wrong somewhere?

[Ashot-KR]

1. execution order defined by rollup itself, plugins can't affect here, we can't do anything with this
2. error comes from typescript compiler, not from plugins. Not sure how all this should work, but i'll try to figure it out and find solution. For now to make it work i recommend to use babel with typescript

[Ashot-KR]

As i expected issue should be fixed on typescript level, it can be done with custom typings
create typings file with following code

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

It tells typescript how to handle .png files.
With this typings everything works as expected.

Based on https://stackoverflow.com/a/51163365