Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components doesn't ship with images properly #278

Closed
arvinsim opened this issue Oct 22, 2019 · 7 comments
Closed

Components doesn't ship with images properly #278

arvinsim opened this issue Oct 22, 2019 · 7 comments
Labels
help wanted Extra attention is needed kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core)

Comments

@arvinsim
Copy link

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
Copy link
Collaborator

swyxio commented Oct 22, 2019

got a test repo?

@arvinsim
Copy link
Author

arvinsim commented Nov 7, 2019

@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
Copy link
Author

Any updates on this?

@cainaleaouk
Copy link

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

@swyxio
Copy link
Collaborator

swyxio commented Dec 4, 2019

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

@swyxio swyxio added good first issue Good for newcomers help wanted Extra attention is needed labels Dec 4, 2019
@asyarb
Copy link

asyarb commented Dec 9, 2019

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
Copy link
Collaborator

agilgur5 commented Mar 9, 2020

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

@agilgur5 agilgur5 closed this as completed Mar 9, 2020
@agilgur5 agilgur5 added kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core) and removed good first issue Good for newcomers labels Mar 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core)
Projects
None yet
Development

No branches or pull requests

5 participants