Uppy: How to use with module bundler?

Question

Uppy recommends using a bundler over the CDN and I understand why — but I'm not too familiar with them.

At first, I tried Browserify because it seemed pretty straight forward, but I struggled to require CSS files. Further research had me feeling like maybe Webpack would be better.

But Webpack is overwhelming me — I could really use an example of how to use either one of these bundlers to compile Uppy, its plugins and CSS, into my main.js.

Here's the basic example from the Uppy docs:

// Import the plugins
const Uppy = require('@uppy/core')
const XHRUpload = require('@uppy/xhr-upload')
const Dashboard = require('@uppy/dashboard')

// And their styles (for UI plugins)
require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')

const uppy = Uppy()
  .use(Dashboard, {
    trigger: '#select-files'
  })
  .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })

uppy.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful)
})

Answer 1

Browserify does not support CSS files by default. The docs example assumes webpack, it should maybe be changed! There are several options:

• Have a separate build for CSS files—you can do this with PostCSS and the postcss-import plugin.

// app.css
@import '@uppy/core/dist/style.css';
@import '@uppy/dashboard/dist/style.css';

Then you can add a separate <style> tag referring to the bundled CSS file.

• Use a CSS plugin for browserify, like sheetify.

const css = require('sheetify')
css('@uppy/core/dist/style.css')
css('@uppy/dashboard/dist/style.css')

browserify -p sheetify ./src/app.js -o bundle.js

Sheetify embeds the CSS into your JavaScript bundle. You can decide to extract it to a separate CSS file (which is better for performance) later using css-extract.