Ionic-app-scripts: Broken prod build chain - Cannot find type definition file for '@types'

[zarko-tg]

... most likely as a result of npm install at present.

ionic-app-scripts build --prod --release

[10:48:16]  ionic-app-scripts 3.2.4 
[10:48:16]  build prod started ... 
[10:48:16]  clean started ... 
[10:48:16]  clean finished in 1 ms 
[10:48:16]  copy started ... 
[10:48:16]  copy finished in 101 ms 
[10:48:16]  deeplinks started ... 
[10:48:16]  deeplinks finished in 375 ms 
[10:48:16]  ngc started ... 
[10:48:31]  typescript error 
            Cannot find type definition file for '@types'. 

[10:48:31]  ionic-app-script task: "build" 
[10:48:31]  Error: Failed to transpile TypeScript 
Error: Failed to transpile TypeScript
    at errorCheckProgram (node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:119:39)
    at Object.<anonymous> (node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:89:21)
    at step (node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
    at Object.next (node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
    at fulfilled (node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)

Regenerating package-lock.json doesn't help.

[intodevelopment]

I also saw this today with one of my projects. It doesn't happen when building a fresh out of the box Ionic project. It only seems to happen when the devDependencies includes an "@types/*" package, for instance I have "@types/node". What seems to fix it is to add "types": [] to the tsconfig.json's compilerOptions.
I cannot completely determine what the impact of this change is on the final build. The Typescript documentation states the following:

Specify "types": [] to disable automatic inclusion of @types packages.

Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & node_modules/@types folders to find the foo package.

[zarko-tg]

We don't depend on any @types/* directly in package.json though I can see a number of sub-dependencies in the mile-long package-lock.json. I can now confirm that at least it builds (with --prod --release) with "types": [] in the compilerOptions of tsconfig.json.
My uncertainty is whether this may have any unwanted side-effects during runtime or authoring (coding). It isn't easy to say atm. as it's a bit more than a 'Hello world' project.

[mikethm]

this appears to be a new issue introduced in the commit for 3.2.4.
3.2.3 doesn't have this issue: https://forum.ionicframework.com/t/cannot-find-type-definition-file-for-types/164794

[snake77se]

I also saw this today with one of my projects. It doesn't happen when building a fresh out of the box Ionic project. It only seems to happen when the devDependencies includes an "@types/*" package, for instance I have "@types/node". What seems to fix it is to add "types": [] to the tsconfig.json's compilerOptions.
I cannot completely determine what the impact of this change is on the final build. The Typescript documentation states the following:

Specify "types": [] to disable automatic inclusion of @types packages.
Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & node_modules/@types folders to find the foo package.

I only had "cordova" directory in node_modules/@types.
And add in tsconfig.json in compilerOptions section "types": ["cordova"], and it worked for me.

Thanks!

[niconaso]

To solve this problem move all the @types/* (eg: @types/highcharts, @types/node) from devDependencies to dependencies. Then specify "types:[]" in tsconfig.json in compilerOptions. eg: "types": ["node", "highcharts"]
Finally, install "@ionic/app-scripts": "3.2.4", in package.json

[let5sne]

To solve this problem move all the @types/* (eg: @types/highcharts, @types/node) from devDependencies to dependencies. Then specify "types:[]" in tsconfig.json in compilerOptions. eg: "types": ["node", "highcharts"]
Finally, install "@ionic/app-scripts": "3.2.4", in package.json

It works!

[fttx]

This should be noted in the CHANGELOG.md as a breaking change.

And also the blank example project should be updated as well

[fdambrosio]

thank you!

[Stephane84]

To solve this problem move all the @types/* (eg: @types/highcharts, @types/node) from devDependencies to dependencies. Then specify "types:[]" in tsconfig.json in compilerOptions. eg: "types": ["node", "highcharts"]
Finally, install "@ionic/app-scripts": "3.2.4", in package.json

@niconaso your solution works but in my case, it broke a simple npm run build on windows.
On Mac or Unix npm run build or npm run build --prod work well.
On Windows, npm run build --prod works with ngc, but npm run build produce :
typescript error
Cannot find type definition file for 'node'.

$ npm run build

> [email protected] build F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2
> ionic-app-scripts build

[14:08:28]  ionic-app-scripts 3.2.4
[14:08:28]  build dev started ...
[14:08:28]  clean started ...
[14:08:28]  clean finished in less than 1 ms
[14:08:28]  copy started ...
[14:08:28]  deeplinks started ...
[14:08:29]  deeplinks finished in 458 ms
[14:08:29]  transpile started ...
[14:08:35]  typescript error
            Cannot find type definition file for 'node'.

[14:08:35]  ionic-app-script task: "build"
[14:08:35]  TypeError: Cannot read property 'replace' of null
TypeError: Cannot read property 'replace' of null
    at Object.escapeHtml (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\util\helpers.js:253:9)
    at generateCodeBlock (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:187:77)
    at generateDiagnosticHtml (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:179:12)
    at Array.map (native)
    at Object.printDiagnostics (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:15:39)
    at F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\transpile.js:158:34
    at transpileWorker (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
    at Object.transpile (F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
    at F:\Dev\Git\mobile\master\mobile-app\mobile-app-v2\node_modules\@ionic\app-scripts\dist\build.js:109:82
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!

The only thing who works on Windows, for npm run build and build --prod, is to set ionic-app-scripts back in 3.2.3 :-<