Closed RobinJayaswal closed 5 years ago
Bump. I'm having the same issue.
I've run into this as well, but it comes from the filestack-js client. Once I had the package compiled with Meteor it started working just fine.
The issue on the client: https://github.com/filestack/filestack-js/issues/142 Though I doubt that the workarounds there will be of any use here...
I'm getting the following error in my Meteor project
/node_modules/filestack-js/build/browser/index.esm.js:19042
Uncaught (in promise) SyntaxError: Unexpected token export
Any suggestions from team Filestack?
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;
@ninjaPixel @StorytellerCZ @graphographer The newest version is using filestack-js 2.0.5 and it should fix this problem.
@AndrzejSala I've just tried filestack-react
3.1.0 and this error is still there
Just installed latest, and am seeing:
I am using gulp, with babel to transpile to es2015, and this configuration works with other modules. Anything special about this module?