File Field Returns "Error"

[stolinski]

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

shows up as

Not sure why. I'd love some code examples in the docs :) I'll try to add some when I can.

[stolinski]

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]

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

[paradoxxxzero]

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]

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]

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

[stolinski]

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

[paradoxxxzero]

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]

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]

I managed to make it work for gatsby: see https://github.com/Kozea/formol/issues/47 I don't know how it works in meteor but you could try something similar

[AlessandroAnnini]

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]

Care to share a link to your code sandbox?

[AlessandroAnnini]

Sure, thanks:

[paradoxxxzero]

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]

Thanks @paradoxxxzero in the meantime this will be ok!

[EricSSartorius]

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