Components doesn't ship with images properly

[arvinsim]

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

[swyxio]

got a test repo?

[arvinsim]

@sw-yx I created a repo to reproduce the error. I commented out rollup-plugin-url and rollup-plugin-image in tsdx.config.js. When I try to use them, I get errors.

[arvinsim]

Any updates on this?

[cainaleaouk]

bump @sw-yx @arvinsim also interested in this...

[swyxio]

havent had time to look into this yet, sorry. if anyone wants to help investigate, or propose the solve, pls be my guest

[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 #379 (comment) 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