Fine Uploader with Webpack & ES6

Question

I am attempting to integrate fine-uploader with a React/ES6 application that is bundled via Webpack. Looking for guidance on how to include fine-uploader with this stack.

In my webpack.config.js I have set an alias for Fine Uploader like so:

resolve: {
    alias: {
      'fine-uploader': path.resolve('node_modules/fine-uploader/s3.fine-uploader')
    }
}

And in my React component I have the following:

import React from 'react'

import 'fine-uploader'

export default () => {
  return <h1>Fine Uploader</h1>
}

Webpack barks at me though:

Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mfeltner/code/yden/foo/node_modules/fine-uploader/s3.fine-uploader in /Users/mfeltner/code/yden/foo/static/common/containers/fine-uploader
 @ ./static/common/containers/fine-uploader/fine-uploader.jsx 11:20-44

I'm fairly sure I need to shim the fine-uploader javascript somehow since it behaves the old school way by attaching itself to window.qq, and I'd imagine this doesn't play well with module loaders.

Answer 1

Figured it out!

First, I had to install the exports-loader for webpack. This loader will shim non-CommonJS/UMD/AMD bundles so you can require or import them (read more here). Then I had to edit my webpack.config.js to shim the qq namespace for the type of Fine Uploader I am using (S3 in this case):

webpack.config.js:

module: {
    loaders: [
        {
            test: /s3\.fine-uploader\.js/,
            loader: 'exports?qq'
        }
    ]
}

Now I am able to import the qq object from Fine Uploader and access it just as I would normally, except it's not on the global namespace. Win!

Note that I had to include a ref to the React-rendered DOM element so Fine Uploader knew where to attach itself. Also, note the use of componentDidMount to ensure the element has been rendered by React.

fine-uploader.jsx:

import React from 'react'

import qq from 'fine-uploader/s3.fine-uploader'

class FU extends React.Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    const fu = new qq.s3.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}

export default FU

I'll probably have more questions as I try and integrate this library with React and the modern Javascript ecosystem.

Answer 2

Just updated to NPM release 5.9.0 and can see they now export modules. This means you can import it into your component without having to use the exports loader in webpack.

import qq from 'fine-uploader/fine-uploader/fine-uploader.js';

also works with

import qq from 'fine-uploader/lib/traditional';

for the s3 loader use

import qq from 'fine-uploader/lib/s3';