After TypeScript update some methods are not found in node modules

[Gayasosos]

When I Updated Angular 17 to 18, I updated TypeScript to the new version. (5.4.0). After that, errors occurred that could not be found.

Here are the versions i used,

"@formio/angular": "^7.0.0",
"@formio/js": "^5.0.0-rc.39",
"formiojs": "^4.19.5",
"typescript": "~5.4.0"

Screenshots

Errors

Error: node_modules/@formio/js/lib/cjs/utils/formUtils.d.ts:20:86 - error TS2304: Cannot find name 'AsyncComponentDataCallback'.

20 export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: AsyncComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise; ~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/js/lib/cjs/utils/formUtils.d.ts:21:46 - error TS2304: Cannot find name 'Component'.

21 export const eachComponentData: (components: Component[], data: DataObject, fn: ComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void; ~~~~~~~~~

Error: node_modules/@formio/js/lib/cjs/utils/formUtils.d.ts:21:65 - error TS2304: Cannot find name 'DataObject'.

21 export const eachComponentData: (components: Component[], data: DataObject, fn: ComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void; ~~~~~~~~~~

Error: node_modules/@formio/js/lib/cjs/utils/formUtils.d.ts:21:81 - error TS2304: Cannot find name 'ComponentDataCallback'.

21 export const eachComponentData: (components: Component[], data: DataObject, fn: ComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void; ~~~~~~~~~~~~~~~~~~~~~ etc...

[lane-formio]

If you are using angular 18, then you should be using formio/[email protected] Also, formio/js is up to 5.0.0-rc.68 now which might show some improvement. The 5.0.0 release of formio/js is now at the forefront of our development priorities so I'd be interested to know if these changes resolve this particular behavior.

[Gayasosos]

Hi @lane-formio,

Error count was decrease but Issue was not completely fixed by above solution. Some errors are still.

"@formio/angular": "^8.0.0-rc.6",
"@formio/js": "^5.0.0-rc.68",
 "formiojs": "^4.19.5",
"typescript": "~5.5.4"

  node : 20.16.0

Errors

./src/app/modules/configuration/form-builder/form-builder.component.ts:3:0-36 - Error: Module not found: Error: Can't resolve '@formio/js' in 'D:\Angular Update 18\ososerp\Web\src\app\modules\configuration\form-builder'

./node_modules/@formio/angular/fesm2022/formio-angular.mjs:3:0-74 - Error: Module not found: Error: Can't resolve '@formio/js' in 'D:\Angular Update 18\ososerp\Web\node_modules@formio\angular\fesm2022'

Error: node_modules/@formio/angular/core.d.ts:14:71 - error TS2307: Cannot find module '@formio/deprecated-types' or its corresponding type declarations.

14 export { ComponentSchema, ExtendedComponentSchema, ElementInfo } from '@formio/deprecated-types'; ~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular/formio.common.d.ts:1:58 - error TS2307: Cannot find module '@formio/deprecated-types' or its corresponding type declarations.

1 import { ExtendedComponentSchema, ValidateOptions } from '@formio/deprecated-types'; ~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/modules/configuration/form-builder/form-builder.component.ts:208:12 - error TS2339: Property 'builder' does not exist on type 'typeof Formio'.

208 Formio.builder(dom, form, { ...options }).then((builder: any) => {

[lane-formio]

Next thing I would suggest is removing formiojs. @formio/js is the new namespace for our open source renderer.

[iabu94]

Hi @lane-formio , good day to you, we have updated everything that you have suggested, but the @formio/angular package is internally referring to @formio/deprecated types, which is throwing these exceptions, could you please help me out to sort this?

[cvetelinandreevdreamix]

After installing "@formio/deprecated-types": "^0.1.0", to package.json the error changes to

Error: node_modules/@formio/core/lib/error/FieldError.d.ts:1:35 - error TS2307: Cannot find module 'types' or its corresponding type declarations.

1 import { ValidationContext } from 'types';

Interestingly, the types is there (in @formio/core) but I can't get why it can't find it. I guess I'll have to stick to angular 17 until this is fixed.

[abu-osos]

After installing "@formio/deprecated-types": "^0.1.0", to package.json the error changes to

Error: node_modules/@formio/core/lib/error/FieldError.d.ts:1:35 - error TS2307: Cannot find module 'types' or its corresponding type declarations.

1 import { ValidationContext } from 'types';

Interestingly, the types is there (in @formio/core) but I can't get why it can't find it. I guess I'll have to stick to angular 17 until this is fixed.

+1, couldn't move to v18 because of this

[hackerman-azds]

After installing "@formio/deprecated-types": "^0.1.0", to package.json the error changes to Error: node_modules/@formio/core/lib/error/FieldError.d.ts:1:35 - error TS2307: Cannot find module 'types' or its corresponding type declarations. 1 import { ValidationContext } from 'types'; Interestingly, the types is there (in @formio/core) but I can't get why it can't find it. I guess I'll have to stick to angular 17 until this is fixed.

+1, couldn't move to v18 because of this

Could you pls share your package.json or the versions you use for v17? I'm having these errors in v7.0 and above and I feel I have to guess by try/error, it's frustrating since the documentation doesn't say which version is compatible to each other.

Thanks in advance, @abu-osos

[travist]

Angular 18 is currently supported within the RC releases of @formio/angular w/ the 5.x renderer.

It should be noted however that you should not use "formiojs" with "@formio/js" since "@formio/js" is the 5.x version of our renderer library. Here is what my package.json looks like with an application that does work in Angular 18.

{
  "name": "@formio/hero",
  "version": "1.3.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/forms": "^18.1.1",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/router": "^18.1.1",
    "@capacitor/android": "^6.1.1",
    "@capacitor/core": "^6.1.1",
    "@formio/angular": "^8.0.0-rc.6",
    "@formio/bootstrap": "^3.0.0-rc.25",
    "@formio/core": "^2.2.0-rc.3",
    "@formio/js": "^5.0.0-rc.66",
    "@jcesarmobile/ssl-skip": "^0.4.0",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.1",
    "bootswatch": "^5.3.3",
    "flatpickr-formio": "^4.6.13-formio.3",
    "lodash": "^4.17.21",
    "ngx-bootstrap": "^18.0.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.3",
    "zone.js": "~0.14.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.1",
    "@angular/cli": "^18.1.1",
    "@angular/compiler-cli": "^18.1.1",
    "@capacitor/assets": "^3.0.1",
    "@capacitor/cli": "^6.1.1",
    "@types/bootstrap": "^5.2.8",
    "@types/jasmine": "~5.1.4",
    "@types/lodash": "^4.17.7",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.4"
  }
}

[renjithsymplr]

@travist With the packages you mentioned also getting the same error. any solution for the issue

[ahmed-hefny]

any updates regarding a solution for this issue?

[lane-formio]

Sorry, we haven't been reproducing this. Is there anything else you can provide that might help us triage?

[cvetelinandreevdreamix]

Same thing with 8.0.0 and 8.1.0-rc.1

"@angular/cdk": "^18.2.14",
"@formio/angular": "^8.1.0-rc.1",
"@formio/js": "^5.0.1",
"typescript": "~5.5.4"

npm install goes fine. When I run the angular app I get Error: node_modules/@formio/angular/core.d.ts:14:71 - error TS2307: Cannot find module '@formio/deprecated-types' or its corresponding type declarations.

If I install the package I get

`Error: node_modules/@formio/core/lib/error/FieldError.d.ts:1:35 - error TS2307: Cannot find module 'types' or its corresponding type declarations.

1 import { ValidationContext } from 'types'; `

Maybe I'm doing something wrong?

[travist]

We may need to make a change to our core library to use relative paths for the packages instead of those defined by "exports" within the package.json. My guess is there is something with your configuration that does not like the "exports" within the package.json and is not properly referencing the modules.

@lane-formio I just created a ticket (FIO-9750) for us to track this and keep this post updated with any progress we make on resolution.

[cvetelinandreevdreamix]

Thank you for your efforts. Here are

• a video recording and https://youtu.be/YhekLTEWpFY
• the source code https://github.com/cvetelinandreev/FormioAndAngular18 that demonstrate the issue.

ng version in both cases

Angular CLI: 18.2.14 Node: 18.20.4 Package Manager: npm 10.7.0 OS: darwin arm64

Angular: 18.2.13 ... animations, common, compiler, compiler-cli, core, elements ... forms, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1802.14 @angular-devkit/build-angular 18.2.14 @angular-devkit/core 18.2.14 @angular-devkit/schematics 18.2.14 @angular/cdk 18.2.14 @angular/cli 18.2.14 @schematics/angular 18.2.14 typescript 5.4.5 zone.js 0.14.10

Angular CLI: 17.3.11 Node: 18.20.4 Package Manager: npm 10.7.0 OS: darwin arm64

Angular: 17.3.12 ... animations, common, compiler, compiler-cli, core, elements ... forms, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.11 @angular-devkit/build-angular 17.3.11 @angular-devkit/core 17.3.11 @angular-devkit/schematics 17.3.11 @angular/cdk 17.3.10 @angular/cli 17.3.11 @schematics/angular 17.3.11 typescript 5.4.5 zone.js 0.14.10

Let me know if you need more info.

[ahmed-hefny]

Hello @cvetelinandreevdreamix,

I think you need to set "skipLibCheck" in your tsconfig.json file to be true, I faced this issue because I was upgrade my Angular version, and because the new version of TS, some import aren't read properly. after I added this property, it worked properly.

[cvetelinandreevdreamix]

True. It fixes the issue with the demo project.

Thank you @ahmed-hefny. I'll report if anything.

[FrozeenHub]

As suggested from @ahmed-hefny i've added on "compileroptions" the property "skipLibCheck": true and now compiles. Thanks a lot! 😊

[lane-formio]

Fixed with https://github.com/formio/core/pull/221