React Component and static resources (images)

[vpezeshkian]

Hi,

Using nwb I'm creating react components and consume them in other projects, so far it's been smooth. However static resources causing the other projects to break.

I have configured nwb config to load images from src/images, and this works fine since webpack is used.

nwb.config.js
var path = require('path');
aliases: {
      'img': path.resolve('src/images')
    }
}

myComponent.js
import myImage from 'img/ic_minimize_question.png'
console.log(myImage) // /ic_add_question_mark.751ec2c3.png
// image is loading just fine

When I build and try to consume the component in other project which is using gulp, I receive Error: Cannot find module 'img/ic_add_question_mark.png'.

How do I handle this as I'm not very good at webpack? I also notice that src/images is not being copied to neither lib nor es...

Thanks.

[insin]

Webpack isn't used when building a component to lib/ and es/ for publishing, we just transpile from src/ using Babel.

I would suggest using a top-level directory for static resources, adding it to package.json files config so it gets published and using relative paths from src/ to it so the same relative paths work from lib/ and es/. Doing it this way will also require users of your component to use webpack and have appropriate file-loader configuration in place.

The best way to do this is still an open question, this is just what's worked for me when publishing components which needed to import static resources, which I've done very little of.

[vpezeshkian]

IMO delivered components must be in complete form and users must not do any extra work to use them, nor they have to have "appropriate" environment to use them.

I was thinking to copy statics to es and lib... I'd like to be able to use Copy Webpack Plugin but it seems like it's being discarded during build process...

extra: {
      devtool: 'source-map',
      plugins: [
        new CopyWebpackPlugin([
          { from: 'src/images', to: 'es/images' },
          { from: 'src/images', to: 'lib/images' }
        ])
      ]
    }

can you help me set up this plugin and use it in build ?

Thanks.

[vpezeshkian]

After copying static images to es and lib dist folders, I am receiving new error from gulp and/or browserify.

events.js:154
      throw er; // Unhandled 'error' event
      ^
SyntaxError: Unexpected character '�'

It seems like webpack and browserify really can't be used in conjunction.

[chadoh]

Why was this closed? It still seems to be an issue. @insin

[zomars]

@insin

Webpack isn't used when building a component to lib/ and es/ for publishing, we just transpile from src/ using Babel.

Is there a way to let the build process copy the assets to the the lib folder, and let the parent (which uses it's own file-loader) handle it?

[zomars]

Nevemind, I've just found out about the --copy-files flag. I'm such an idiot.