webpack issue

[scheiblr]

Hi, First of all thanks for this piece of software. I just incorporated the json-schema example into my existent react-application with bs4.

Unfortunately, I get this error:

ERROR in ./node_modules/uniforms-bootstrap4/src/RadioField.js
Module parse failed: Unexpected token (10:12)
You may need an appropriate loader to handle this file type.
|     wrapField(props, (
|         props.allowedValues.map(item =>
|             <div
|                 key={item}
|                 className={classnames(
 @ ./node_modules/uniforms-bootstrap4/src/index.js 19:0-59
 @ ./src/views/Pages/Login/Login.js
 @ ./src/views/Pages/index.js
 @ ./src/views/index.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3001 webpack/hot/dev-server babel-polyfill ./src/index.js

is there something special, I need to consider in my webpack setup?

Kind regards

[radekmie]

Hi @scheiblr. I'm not sure about it, but it seems like your loader wanted to use the non-transpiled version of the package. This way, you'll definitely need all the plugins that are used here (see .babelrc). You can use the transpiled ones, but the configuration depends on the Webpack version.

If you can fiddle with it a bit and let me know about your findings and used versions - that would be great.

[scheiblr]

Thanks for the fast reply @radekmie. I'm currently using webpack 3, but want to see if an upgrade to 4 changes something. As far as I understood it, the transpiled version is imported. Only if I import from formed/src it takes the non-transpiled one. Thus, I'm a bit confused.

[radekmie]

I'm not a Webpack expert, but I guess it's a normal thing for Webpack. Have you maybe asked on Webpack related forums or similar places?

[scheiblr]

alright, got it at least compiling. You were right, it really imported the non-transpiled version although I did not point to it.

I changed the import from import {ValidatedForm} from 'uniforms-bootstrap4'; to import ValidatedForm from 'uniforms-bootstrap4/ValidatedForm';

Still, I cannot see the form and get the following warnings:

WARNING in ./node_modules/uniforms/SimpleSchemaBridge.js
Module not found: Error: Can't resolve 'meteor/aldeed:simple-schema' in '/home/schmittr/git/own/app-base/node_modules/uniforms'
 @ ./node_modules/uniforms/SimpleSchemaBridge.js 84:23-55
 @ ./node_modules/uniforms/createSchemaBridge.js
 @ ./node_modules/uniforms/BaseForm.js
 @ ./node_modules/uniforms/ValidatedForm.js
 @ ./node_modules/uniforms-bootstrap4/ValidatedForm.js
 @ ./src/views/Dashboard/Dashboard.js
 @ ./src/views/index.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3001 webpack/hot/dev-server babel-polyfill ./src/index.js

WARNING in ./node_modules/uniforms/SimpleSchemaBridge.js
Module not found: Error: Can't resolve 'meteor/check' in '/home/schmittr/git/own/app-base/node_modules/uniforms'
 @ ./node_modules/uniforms/SimpleSchemaBridge.js 80:16-33
 @ ./node_modules/uniforms/createSchemaBridge.js
 @ ./node_modules/uniforms/BaseForm.js
 @ ./node_modules/uniforms/ValidatedForm.js
 @ ./node_modules/uniforms-bootstrap4/ValidatedForm.js
 @ ./src/views/Dashboard/Dashboard.js
 @ ./src/views/index.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3001 webpack/hot/dev-server babel-polyfill ./src/index.js

And I try to get run the example from the docs

[scheiblr]

changed it to import ValidatedForm from 'uniforms-bootstrap4/AutoForm'; and it shows something. Somehow the button has no caption. This is also the case in the json-schema bootstrap4 demo you provide on https://uniforms.tools/.

[radekmie]

Yep, we are afraid of these warnings. We can't do anything about it, as webpack statically resolves modules and even wrapping require calls in try blocks fires this warning. Anyway, as you've fixed the issue, I'm closing.

---

The other issue is an empty SubmitField label. Can you maybe file another issue?

[theodorDiaconu]

Module parse failed: Unexpected token (8:8)
You may need an appropriate loader to handle this file type.
| const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) =>
|     (!error && !children) ? nothing : (
>         <div {...filterDOMProps(props)}>
|             {children}
|             <ul>
 @ ./node_modules/uniforms-antd/src/index.js 8:0-60 8:0-60
 @ ./src/client/components/ErrorField/index.jsx
 @ ./src/client/layouts/ProfileLayouts/ProfileChange/BasicProfile/index.jsx
 @ ./src/client/layouts/ProfileLayouts/ProfileChange/BasicProfile/layout.stories.js
 @ ./src/client sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./node_modules/uniforms-antd/src/QuickForm.js 9:17
Module parse failed: Unexpected token (9:17)
You may need an appropriate loader to handle this file type.
|
| const Quick = parent => class extends QuickForm.Quick(parent) {
>     static Quick = Quick;
|
|     getAutoField () {
 @ ./node_modules/uniforms-antd/src/index.js 18:0-58 18:0-58
 @ ./src/client/components/ErrorField/index.jsx
 @ ./src/client/layouts/ProfileLayouts/ProfileChange/BasicProfile/index.jsx
 @ ./src/client/layouts/ProfileLayouts/ProfileChange/BasicProfile/layout.stories.js
 @ ./src/client sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

This issue occurs with storybook

[radekmie]

@theodorDiaconu you are using original sources (note the /src/ in the path), but not transpile them (You may need an appropriate loader to handle this file type.). It's something incorrect in your configuration.