[BUG] Form does not change language when options change

[madflow]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • Local deployment
    • Version: Latest
• Formio.js version: Latest
• Frontend framework: React
• Browser: Firefox latest
• Browser version: latest

Steps to Reproduce

1. Use React and Formio with i18next.
2. Configure everything something like this:

  const options = {
    i18n: {
      [i18n.language]: i18n.getResourceBundle(i18n.language, 'translation'),
    },
    language: i18n.language,
    hooks: {},
  };

// https://help.form.io/developers/form-renderer#form-renderer-options
  return (
    <>
      <Form
        src={url}
        onSubmitDone={onSubmitDone}
        formReady={onFormReady}
        options={options}
      />
      {isReady ? null : <LoadingSpinner animation="border" />}
    </>
  );

3. Change the language

Expected behavior

• Language changes in the form

Observed behavior

• Language does not change

This can be hack-fixed by amending Form.jsx ,

react/src/components/Form.jsx

Line 62 in e9d61b0

}, [props.src]);

  useEffect(() => {
    const { src } = props;
    if (src) {
      createWebformInstance(src).then(() => {
        if (formio) {
          formio.src = src;
        }
      });
      initializeFormio();
    }
  }, [props.src, props.options]);

[rijusougata13]

hi @madflow can you assign me here?

[madflow]

@rijusougata13 No, I cannot assign you.

[rafapsm]

@madflow @rijusougata13 Is there a solution for this problem. I am facing the same issue.
Thanks

[travist]

We added this for our Monday planning to get this prioritized. Thanks.

[PatrikWing]

Having the same issue.

[lane-formio]

We've done some work recently around translations. Can you try again with the latest rc versions to see if this has resolved?

[madflow]

@lane-formio

I have installed the latest RC Version, which required a npm namespace change using the "formiojs" now as @formio/js library. I tried a full update:

 yarn add @formio/js @formio/react @formio/premium

This resulted in:

    "@formio/js": "5.0.0-rc.48",
    "@formio/premium": "^2.0.3",
    "@formio/react": "^5.3.1-dev.AvA08V.6",

Changing the language and passing it down as prop (see initial first post) is still not working.

Also, the `@formio/premium" package does not build properly and the complete build fails (I had to disable it to test the language changes). It seems, that the premium package does not know about the name change yet.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/components/Sketchpad/Sketchpad.form.js:8:27:
      8 │ import { Components } from 'formiojs';
        ╵                            ~~~~~~~~~~

  You can mark the path "formiojs" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/utils/utils.js:14:45:
      14 │ import { Utils as FormioUtils, Formio } from 'formiojs';
         ╵                                              ~~~~~~~~~~

  You can mark the path "formiojs" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/components/DynamicWizard/editForm/DynamicWizard.edit.templates.js:1:22:
      1 │ import { Utils } from 'formiojs';
        ╵                       ~~~~~~~~~~

  You can mark the path "formiojs" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/components/DataTable/DataTableFormioIntegration.js:19:37:
      19 │ import { Components, Builders } from 'formiojs';
         ╵                                      ~~~~~~~~~~

  You can mark the path "formiojs" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/components/DataTable/DataTable.form.js:8:27:
      8 │ import { Components } from 'formiojs';
        ╵                            ~~~~~~~~~~

  You can mark the path "formiojs" as external to exclude it from the bundle, which will remove this
  error.

✘ [ERROR] Could not resolve "formiojs"

    node_modules/@formio/premium/lib/components/Captcha/editForm/Captcha.edit.display.js:1:22:
      1 │ import { Utils } from 'formiojs';
        ╵                       ~~~~~~~~~~

[lane-formio]

Apologies, try @formio/[email protected]