Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

File Field Returns "Error" #46

Open
stolinski opened this issue Apr 9, 2019 · 15 comments
Open

File Field Returns "Error" #46

stolinski opened this issue Apr 9, 2019 · 15 comments

Comments

@stolinski
Copy link
Contributor

stolinski commented Apr 9, 2019 •
edited
Loading

<Field type="file">Background</Field>

shows up as

Screenshot 2019-04-09 14 00 19

Not sure why. I'd love some code examples in the docs :) I'll try to add some when I can.
@stolinski
Copy link
Contributor Author 

Uncaught SyntaxError: Unexpected token <
/node_modules/formol/lib/formol.js:9 Error: Loading chunk 9 failed.
(missing: http://localhost:3000/admang/seriesizer/assets/formol/vendors~FileField.js)
    at HTMLScriptElement.u (/node_modules/formol/lib/formol.js:9)
(anonymous) @ /node_modules/formol/lib/formol.js:9
s @ /node_modules/formol/lib/formol.js:9
(anonymous) @ /node_modules/formol/lib/formol.js:9
e.(anonymous function) @ /node_modules/formol/lib/formol.js:9
n @ /node_modules/formol/lib/formol.js:9
l @ /node_modules/formol/lib/formol.js:9
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
n @ /node_modules/formol/lib/formol.js:9
u @ /node_modules/formol/lib/formol.js:9
(anonymous) @ /node_modules/formol/lib/formol.js:9
(anonymous) @ /node_modules/formol/lib/formol.js:9
(anonymous) @ /node_modules/formol/lib/formol.js:9
value @ /node_modules/formol/lib/formol.js:9
commitLifeCycles @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:24989
commitAllLifeCycles @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26391
callCallback @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7804
invokeGuardedCallbackDev @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7854
invokeGuardedCallback @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7911
commitRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26603
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28073
unstable_runWithPriority @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:33052
completeRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28072
performWorkOnRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28001
performWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27909
performSyncWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27883
requestWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27752
scheduleWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27566
enqueueForceUpdate @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:18863
Component.forceUpdate @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:1680
Query._this.updateCurrentData @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:49818
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:49796
notifySubscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55211
onNotify @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55246
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55300
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:51455
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:51455
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52352
step @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50933
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50914
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50907
__awaiter @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50903
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52216
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52696
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52695
QueryManager.broadcastQueries @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52690
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52788
step @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50933
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50914
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50907
__awaiter @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50903
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52745
notifySubscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55211
onNotify @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55246
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55300
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55862
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55862
notifySubscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55211
onNotify @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55246
next @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55300
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:60977
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:60976
Subscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55264
subscribe @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55343
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55857
Subscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55264
subscribe @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55343
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52852
QueryManager.fetchRequest @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52727
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52181
step @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50933
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50914
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50907
__awaiter @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:50903
QueryManager.fetchQuery @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52118
QueryManager.startQuery @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:52512
ObservableQuery.setUpQuery @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:51462
ObservableQuery.onSubscribe @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:51434
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:51165
Subscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55264
subscribe @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:55343
Query._this.startQuerySubscription @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:49779
Query.componentDidMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:49909
commitLifeCycles @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:24989
commitAllLifeCycles @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26391
callCallback @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7804
invokeGuardedCallbackDev @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7854
invokeGuardedCallback @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:7911
commitRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26603
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28073
unstable_runWithPriority @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:33052
completeRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28072
performWorkOnRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28001
performWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27909
performSyncWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27883
requestWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27752
scheduleWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27566
enqueueSetState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:18824
Component.setState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:1662
update @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58390
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58400
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
componentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58399
callComponentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19076
mountClassInstance @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19169
updateClassComponent @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:22343
beginWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:23299
performUnitOfWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26967
workLoop @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27007
renderRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27090
performWorkOnRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27997
performWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27909
performSyncWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27883
requestWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27752
scheduleWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27566
enqueueSetState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:18824
Component.setState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:1662
update @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58390
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58400
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
componentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58399
callComponentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19076
mountClassInstance @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19169
updateClassComponent @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:22343
beginWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:23299
performUnitOfWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26967
workLoop @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27007
renderRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27090
performWorkOnRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27997
performWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27909
performSyncWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27883
requestWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27752
scheduleWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27566
enqueueSetState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:18824
Component.setState @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:1662
update @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58390
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58400
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
componentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:58399
callComponentWillMount @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19076
mountClassInstance @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:19169
updateClassComponent @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:22343
beginWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:23299
performUnitOfWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:26967
workLoop @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27007
renderRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27090
performWorkOnRoot @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27997
performWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27909
performSyncWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27883
requestWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27752
scheduleWork @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:27566
scheduleRootUpdate @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28227
updateContainerAtExpirationTime @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28255
updateContainer @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28312
ReactRoot.render @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28608
(anonymous) @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28745
unbatchedUpdates @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28114
legacyRenderSubtreeIntoContainer @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28741
hydrate @ modules.js?hash=4b9e6acc9e9b2f637ce859c2f27eb124d7968546:28803
(anonymous) @ index.js:36
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=0bbd44021409d2a1858ff0fd3fd612863bf2cb96:132
onPageLoad @ client.js:8
index.js @ index.js:27
fileEvaluate @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268
(anonymous) @ app.js?hash=adc51d68c080f5bcf65fc7101287fc99676fa01d:7023
Show 74 more frames
FileField.js:1 Uncaught SyntaxError: Unexpected token <

@stolinski
Copy link
Contributor Author

Getting a similar error with select-menu as well. Seems like it's something weird with the 3rd party library fields.

@paradoxxxzero
Copy link
Member

Hum seems like the async chunk request for vendors~FileField.js returns a 404. Do you get the error in the console? Is the file accessible?

@stolinski
Copy link
Contributor Author

The only errors I'm seeing in console are what was pasted above. I can't imagine that the file isn't accessible, I'm wondering if it's the ~ that's throwing things off. Hm.

@paradoxxxzero
Copy link
Member

I think I got it, could you try again with the more detailed installation instructions I added in the storybook

@stolinski
Copy link
Contributor Author

Just checked out the update. I'm not using Webpack, so unfortunately I can't use the suggested config.

@paradoxxxzero
Copy link
Member

Out of simple curiosity, what do you use instead?

FileField.js:1 Uncaught SyntaxError: Unexpected token <
This error means it tried to get FileField.js but actualy got an html file instead.

Can you try to copy the js files in your assets/formol directory (served at http://localhost:3000/admang/seriesizer/assets/formol/vendors~FileField.js) to see if it fix the problem?

@stolinski
Copy link
Contributor Author

For this project using Meteor but I would typically reach for something like Parcel or Gatsby (webpack under the hood).

Meteor's build tool is fantastic and typically doesn't run into issues code splitting.

@paradoxxxzero
Copy link
Member

I managed to make it work for gatsby: see #47
I don't know how it works in meteor but you could try something similar

@AlessandroAnnini
Copy link

I am trying it on codesandbox with the simplest example (login+password) and i get the same error, the folder trick is not helping i think

@paradoxxxzero
Copy link
Member

Care to share a link to your code sandbox?

@AlessandroAnnini
Copy link

Sure, thanks:
Edit Formol Test

@paradoxxxzero
Copy link
Member

Here you go: https://codesandbox.io/s/92ln56740p?fontsize=14
Since you can't link from node-module there, I uploaded the current formol lib folder content in the public directory.
There ought to be a better solution.

@AlessandroAnnini
Copy link

Thanks @paradoxxxzero in the meantime this will be ok!

@EricSSartorius
Copy link

Also getting the same error for <Field type="html"> (using the same repository as @stolinski )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@paradoxxxzero @stolinski @AlessandroAnnini @EricSSartorius