Error with next.js

[chris]

Hi,

I have some troubles to use react-filepond and filepond-plugin-image-preview with the framework https://github.com/zeit/next.js/

I add in package.json

"react-filepond": "2.0.1",
"filepond-plugin-image-preview": "1.0.7",

I also add the webpack conf to be able to import .css directly

const withCss = require('@zeit/next-css');
module.exports = withCss();

In pages/_document.js

import 'filepond/dist/filepond.min.css';

I use the lib like this

import React, { Component } from 'react';

import { FilePond, File } from 'react-filepond';
import FilePondImagePreview from 'filepond-plugin-image-preview';

import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

registerPlugin(FilePondImagePreview);

export default class App extends Component {
  state = {
    files: []
  };

  render() {
    return (
      <div className="App">
        <FilePond allowMultiple={true} maxFiles={3} server="/api">
          {this.state.files.map(file => <File key={file} source={file} />)}
        </FilePond>
      </div>
    );
  }
}

But I've got this error

ReferenceError: document is not defined
    at /Users/parweb/Sites/ww/web/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js:516:31
    at /Users/parweb/Sites/ww/web/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js:8:25
    at Object.<anonymous> (/Users/parweb/Sites/ww/web/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js:12:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.filepond-plugin-image-preview (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/test.js:175:18)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 5a8118312b56294cab40?e09f:21:1)
    at Object../pages/place/test.js (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/test.js:91:88)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 5a8118312b56294cab40?e09f:21:1)
    at Object.2 (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/test.js:167:18)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 5a8118312b56294cab40?e09f:21:1)

[Rik]

@parweb Chris, I know you probably mean well, but adding some context to the issue makes the issue easier to find for other developers, also, the more effort you put in, the more I want to put in.

That said, this is probably the same problem as with the core library. Looking into it now.

[chris]

I did my best ;)

[Rik]

@parweb Thanks so much for describing the problem more clearly.

I just published version 1.0.8 of the Image Preview plugin. This version fixes the problem on my Next.js playground.

import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

registerPlugin(FilePondPluginImagePreview);
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

I quickly searched the other plugins for browser specific features that are used on run but couldn't find any. So they should be okay.