SyntaxError: 'import' and 'export' may only appear at the top level

Just installed latest, and am seeing:

SyntaxError: 'import' and 'export' may only appear at the top level (8656:0) while parsing /node_modules/filestack-js/build/browser/index.esm.js

I am using gulp, with babel to transpile to es2015, and this configuration works with other modules. Anything special about this module?

[AndrzejSala]

@ninjaPixel @StorytellerCZ @graphographer The newest version is using filestack-js 2.0.5 and it should fix this problem.

[ninjaPixel]

Here’s a really dirty workaround, for those experiencing the same issue with filestack-react and Meteor.

1 - Remove filestack-react from your project:

npm rm filestack-react

2 - Add filestack-js:

npm i --save filestack-js

3 - Create a new react component in your project, called ReactFilestack.jsx and paste in the code found here: https://github.com/filestack/filestack-react/blob/master/src/ReactFilestack.jsx

Then change the import statement for filestack to point directly to /node_modules/filestack-js/build/browser/filestack.min.js

You can then use this new component in place of the filestack-react package.

import React, { Component } from 'react';
import * as filestack from '/node_modules/filestack-js/build/browser/filestack.min.js';
import PropTypes from 'prop-types';

class ReactFilestack extends Component {
  static defaultProps = {
    file: null,
    link: false,
    buttonText: 'Pick file',
    buttonClass: '',
    onSuccess: result => console.log(result),
    onError: error => console.error(error),
    mode: 'pick',
    options: {},
    security: null,
    children: null,
    render: null,
    cname: null,
    sessionCache: false,
    preload: false,
  };

  static propTypes = {
    file: PropTypes.objectOf(PropTypes.any),
    apikey: PropTypes.string.isRequired,
    link: PropTypes.bool,
    mode: PropTypes.string,
    buttonText: PropTypes.string,
    buttonClass: PropTypes.string,
    onSuccess: PropTypes.func,
    onError: PropTypes.func,
    options: PropTypes.objectOf(PropTypes.any),
    security: PropTypes.objectOf(PropTypes.any),
    children: PropTypes.node,
    render: PropTypes.func,
    cname: PropTypes.string,
    sessionCache: PropTypes.bool,
    preload: PropTypes.bool,
  };

  constructor(props) {
    super(props);
    const { apikey, security, cname, sessionCache, preload, options } = this.props;
    const client = filestack.init(apikey, {
      security,
      cname,
      sessionCache,
    });
    this.state = {
      client,
      picker: preload ? client.picker({ ...options, onUploadDone: this.onFinished }) : null,
    };

    this.onFinished = this.onFinished.bind(this);
    this.onFail = this.onFail.bind(this);
  }

  onClickPick = event => {
    event.stopPropagation();
    event.preventDefault();

    const { client, picker } = this.state;

    const { options, mode, file, security, preload } = this.props;

    this.callPicker(mode, options, file, security, preload, client, picker)
      .then(this.onFinished)
      .catch(this.onFail);
  };

  onFinished = result => {
    const { onSuccess } = this.props;
    if (typeof onSuccess === 'function' && result) {
      onSuccess(result);
    }
  };

  onFail = error => {
    const { onError } = this.props;
    if (typeof onError === 'function') {
      onError(error);
    } else {
      console.error(error);
    }
  };

  callPicker = (mode, options, file, security, preload, client, picker) => {
    const { url, handle } = options;
    delete options.handle;
    delete options.url;

    if (mode === 'transform') {
      return new Promise((resolve, reject) => {
        try {
          resolve(client.transform(handle, options));
        } catch (err) {
          reject(err);
        }
      });
    } else if (mode === 'retrieve') {
      return client.retrieve(handle, options);
    } else if (mode === 'metadata') {
      return client.metadata(handle, options);
    } else if (mode === 'storeUrl') {
      return client.storeURL(url, options);
    } else if (mode === 'upload') {
      return client.upload(file, options);
    } else if (mode === 'remove') {
      return client.remove(handle, security);
    }

    return new Promise(resolve => {
      if (preload) {
        picker.open();
        resolve();
      } else {
        client.picker({ ...options, onUploadDone: resolve }).open();
      }
    });
  };

  render() {
    const { buttonClass, buttonText, link, children, render: CustomRender } = this.props;
    if (CustomRender) {
      return <CustomRender onPick={this.onClickPick} />;
    }
    const Tag = link ? 'a' : 'button';
    return (
      <Tag name="filestack" onClick={this.onClickPick} className={buttonClass}>
        {children || buttonText}
      </Tag>
    );
  }
}

export default ReactFilestack;