Here is my scenario:
I have developed a components library for React. Within this library, there is a package bundled with Rollup that contains various assets, including a GIF picture used in one of the components.
The specific component utilizing this picture looks like so:
import React from 'react';
import PropTypes from 'prop-types';
import ui_spinner from '../../../assets/ui_progress.gif';
/**
* CircularSpinner
* Displays a spinner to indicate loading state
*/
class CircularSpinner extends React.PureComponent {
static propTypes = {
/** Width of the spinner */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Height of the spinner */
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Custom style overrides */
style: PropTypes.object,
}
static defaultProps = {
width: 128,
height: 128,
style: {},
}
render() {
const { style, width, height } = this.props;
return (
<img src={ui_spinner} width={width} height={height} style={style} alt="ui_progress" aria-busy="true" />
);
}
}
export default CircularSpinner;
After building the project, everything seems fine.
Next, I am working on a React application created using create-react-app and want to test the components library. To achieve this, I utilize npm link to avoid deploying the npm package each time. While the components function correctly within the testing application, the image (the GIF within CircularSpinner) fails to appear.
Hence, my query lies in: How can I include assets in a JavaScript bundle using Rollup? Is my current approach appropriate?
This is my Rollup configuration:
import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import url from 'rollup-plugin-url'
const config = {
input: 'src/index.js',
external: ['react'],
output: {
format: 'umd',
name: 'react-components',
globals: {
react: "React"
}
},
plugins: [
babel({
exclude: "node_modules/**"
}),
uglify(),
url(),
]
}
export default config
I execute the build process using rollup -c -o dist/index.js.
The contents of the 'dist' folder after compilation are as follows:
dist/
assets
92be5c546b4adf43.gif
index.js
In the testing application, the image reference looks like this:
<img src="92be5c546b4adf43.gif" width="128" height="128" alt="ui_progress" aria-busy="true">Any assistance would be greatly appreciated!
Regards, Damien