formio.js: [BUG] FormBuilder error: Uncaught (in promise) Missing projectId

Functionality is fine, but the error logging is annoying, particularly if you have browser logs getting shipped to a logging service.

@simonv3, let us know if you see the issue moving forward. Glad to hear that it is no longer occurring.

We are working on making a stable release of 4.14.0.

Change from the Branches section to the tags and you will see the latest version of 4.14.0 is rc.31.

It’s because formio’s default constructor function doesn’t pass the [options] argument, and the code that looks for it finds no 2nd argument, and thus options is empty, and thus options.base is empty, and thus projectUrl cannot be determined, so it is a blank string, and thus this error gets shoved in the console because the evaluation of empty-string returns false (!“” == true).

So yea even if you specify base, it has this logical flaw. (with proposed change below, specifying options.base would fix) var formio = new _Formio.default(_Formio.default.projectUrl); should be var formio = new _Formio.default(_Formio.default.projectUrl, _this.options);

It looks benign though, the system still works fine for me. It’s just hard red in the console, and totally pointless (in terms of being so easily fixable). Are you guys experiencing an actual problem with this? Or just seeing it in console like I am. I thought i was having an issue, but was something else, but ended up deep diving this anyway.

Have the same error and it seems blocker for me considering upgrade to 4.13.x version

Any updates about the issue? @travist

In React this will actually pop up the error message pop-up that blocks the entire screen while editing, making working on a page with formio on it a bit a of a pain.

So the issue comes from the WebformBuilder class:

https://github.com/formio/formio.js/blob/0f3672cc2a94d89ae6b47b5f53dc12ecb10f74e9/src/WebformBuilder.js#L231-L243

So the builder calls loadProject using the current Formio instance to retrieve the project settings in search for form global settings. This function fails if projectId is empty. There are 3 ways to determine the projectId:

1. Checking that the api url has the format .../project/:projectId/... (explicit project id)
2. Checking if the url hostname matches the base url and getting the first path portion of the url (subdirectories)
3. Checking if hostname has a subdomain (subdomain)

https://github.com/formio/formio.js/blob/0f3672cc2a94d89ae6b47b5f53dc12ecb10f74e9/src/Formio.js#L175-L200

There is also a preliminary check to determine this as well:

https://github.com/formio/formio.js/blob/0f3672cc2a94d89ae6b47b5f53dc12ecb10f74e9/src/Formio.js#L106-L111

Of course this approach is very untrustworthy as it is made to work with the commercial setup of form.io, and unless you manually pass on the correct formio options before creating the Formio instance, it most probably fail (as an example, you may pass an IP address as path and baseURL and it will treat it as a subdomain type of project).

In fact, the official documentation states what are the requirements of any local deployment (of the commercial build)

https://help.form.io/developer/onpremise/#dns-setup

Here are some results for different paths (without setting options):

import { Formio } from 'formiojs';

const formio = new Formio(path);

Any updates regarding this bug? It is blocker issue

I am facing similar issue with angular.

“angular-formio”: “^4.4.5”, “formiojs”: “^4.13.2”,

zone.js:690 Unhandled Promise rejection: Missing projectId ; Zone: <root> ; Task: Promise.then ; Value: Missing projectId undefined

can anyone help please?

Hi guys, any info here? @travist , @wag110894 ?