Components doesn't ship with images properly

Current Behavior

I have been trying to create a react component with images for the purpose of reusing them across different apps.

However, when I build the library and import the component, the component works fine except all the images are not referenced properly

I also tried running Storybook and I got the same issue.

Expected behavior

Build process should ship images properly

Suggested solution(s)

Additional context

1. I run tsdx build on the prepare script in the package.json
2. I tried using babel-plugin-file-loader, rollup-plugin-url and rollup-plugin-image but they didn’t work.

Your environment

Software	Version(s)
TSDX	0.9.3
TypeScript	3.6.2
Browser	Chrome Version 77.0.3865.120
npm/Yarn	Yarn 1.19.1
Node	10.15.3
Operating System	MacOS Mojave 10.14.6

[asyarb]

Sharing my config workaround to get images to work with tsdx.

// tsdx.config.js
const images = require('rollup-plugin-image-files')

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

    return config
  },
}

It seems like your rollup plugin to handle images needs to come before tsdx’s plugins. (I’m guessing before rollup-plugin-typescript2?).

---

I tried to get this working with @rollup/plugin-url, but couldn’t figure it out. If anyone is interested, my config with @rollup/plugin-url can be seen below.

Maintainer edit: updated to reflect v0.13.0+

const url = require('@rollup/plugin-url')

module.exports = {
  rollup(config, options) {
    config.plugins = [
      // Force the `url` plugin to emit files.
      url({ limit: 0, incude: ['**/*.png', '**/*.jpg'] }),
      ...config.plugins,
    ]

    return config
  },
}

The main problem seems to be that @rollup/plugin-url will generate a plain string instead of leveraging a require when you try to use an asset, which wont signal to a library consumer’s bundler to properly generate the path for their project. (can be seen in action with Parcel in the example/ directory)

[agilgur5]

Going to close the out since a solution was found. See https://github.com/jaredpalmer/tsdx/issues/379#issuecomment-568239477 for the summary from here.

Import order seems to affect this specific plugin. I’m not really sure why @rollup/plugin-url doesn’t work