ui-concerto production build failing without storybook

[discochance]

Bug Report 🐛

When trying to deploy a production build of ui-concerto (adapted to work without storybook) only a blank page shows and some errors are thrown.

Expected Behavior

I expected the ConcertoForm element to render correctly showing a similar interface to the one in the netlifiy demo.

Current Behavior

The errors thrown are following:
A minified React Error #130 is thrown twice as well as a Type Error:

    exports Babel
    e modelmanager.js:54
    e index.esm.js:1
    t index.esm.js:1
    React 12
    910 index.js:9
    f (index):1
    528 main.5337f8e6.chunk.js:1
    f (index):1
    t (index):1
    r (index):1
    <anonymous> main.5337f8e6.chunk.js:1

When not building for production but developing the following Warning is thrown with everything on default:

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by Input)
    in div (created by Input)
    in Input (created by ce)
    in div (created by FormField)
    in FormField (created by ce)
    in ce (created by n)
    in form (created by Form)
    in Form (created by n)
    in n (created by be)
    in r (created by be)
    in be (at test.js:51)
    in div (at test.js:50)
    in Demo (at src/index.js:9)

When I use a Modelfile which includes a DateTime Object another Warning (Failed prop type: The prop 'value' is marked as required in 'DateTimeInput', but its value is 'undefined'. in DateTimeInput (created by ue)) is thrown additionally.

If the rendered Object is an asset extending AccordContract another Warning (Each child in a list should have a unique "key" prop.) is thrown, as the corresponding pe Element which contains the Parties in the Form doesn't have a key property.

Possible Solution

Steps to Reproduce

1. Use npx create-react-app test to create a react app
2. Use this Code which is the ui-concerto Storybook without using storybook, as src/App.js
3. In src/index.js replace import App from './App' with import Demo from './App' and <App /> with <Demo />
4. Add

    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.0"

to the dependencies in package.json
5. Run with npm start and observe Dev Warnings
6. Run npm build and serve i.e. via nginx and docker: docker run --name some-nginx -p 80:80 -v /path/to/CRA-App/test/build/:/usr/share/nginx/html:ro -d nginx

Context (Environment)

Desktop

• OS: Arch
• Browser: Firefox, Chrome
• Version: 78.0.1

[dselman]

Please refer to this project for the required scaffolding: https://github.com/accordproject/web-components-starter

[jolanglinais]

@DianaLease could you provide more context on this? My understanding is a bit limited, but I think we have some issues we are working on within the main web-components repository, and in the meantime we have the starter repo to solve the immediate issue.

[DianaLease]

There is a known issue with using web-components with an app created with create-react-app. We suggest using the web-components-starter in the meantime. This starter app is also using a micropublish of ui-concerto that recently fixed several bugs (version 0.93.2-20200702221818).

[discochance]

Thanks, I'll try that

[jeromesimeon]

@irmerk maybe we can close this as "duplicate" ?

[discochance]

Sorry for not closing earlier