react-filepond with next.js

Hi,

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

I add in package.json "react-filepond": "1.2.0",

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

but I’m still have a problem

import React, { createElement } from 'react';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    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.react-filepond (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/external "react-filepond"?b8ed:1:1)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 3e856f59bcd105a28e6b?7d67:21:1)
    at Object../pages/place/test.js (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/test.js:89:73)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 3e856f59bcd105a28e6b?7d67:21:1)
    at Object.3 (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/test.js:165:18)
    at __webpack_require__ (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 3e856f59bcd105a28e6b?7d67:21:1)
    at module.exports../node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css (/Users/parweb/Sites/ww/web/.next/dist/bundles/pages/place/webpack:/webpack/bootstrap 3e856f59bcd105a28e6b?7d67:68:1)```

Issue Analytics

State:
Created 5 years ago
Comments:6

Top GitHub Comments

4reactions

rikschenninkcommented, Apr 5, 2018

filepond has been updated to 1.2.8 -> should now stop running when not in a browser environment.
react-filepond has been updated to 2.0.1 -> CSS file now has to be included manually, you’ll need to install @zeit/next-css for this.

next.config.js

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

pages/index.js

import Head from 'next/head';
import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

export default () => (
    <div>
        <Head>
            <title>Example page</title>
            <link href="_next/static/style.css" rel="stylesheet" />
        </Head>
        <div>
            <FilePond />
        </div>
    </div>
)

1reaction

parwebcommented, Apr 5, 2018

ReferenceError: document is not defined
    at /Users/parweb/Sites/ww/web/node_modules/filepond/dist/filepond.js:7877:3
    at isNode (/Users/parweb/Sites/ww/web/node_modules/filepond/dist/filepond.js:8:7)
    at Object.<anonymous> (/Users/parweb/Sites/ww/web/node_modules/filepond/dist/filepond.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.<anonymous> (/Users/parweb/Sites/ww/web/node_modules/react-filepond/dist/react-filepond.js:14:17)
    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)```