Creating a react component npm package with webpack or babel doesn't work

Question

I've got a problem with making a React Component npm package. In a component in this package I use an image (import MyPicture from 'path/image.png'). I wanted to export it in as a git npm package so I installed babel to transpile it and it failed on converting png to js so I installed webpack and used image-loader + babel-loader. Everything on npm start works but my IDE (Webstorm) doesn't see the paths after webpack builds. If I build it using babel, the IDE finds the correct paths, but the image isn't transpiled. Anyone got similar problem?

Steve -Cutter- Blades Steve -Cutter- Blades · Accepted Answer · 2020-10-02T18:29:03

As a reusable component, you need to inline the asset. You need to use a plugin that will embed your image, and have to setup a rule in your webpack config. A common way to do this is with the url-loader, which would convert the image to base64.

{
  test: /\.(jpg|png)$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 25000,
    },
  },
},

Important to note that this will also increase your bundle size.

Creating a react component npm package with webpack or babel doesn't work

1 Answers