Angular 6: Can't resolve 'stream'

[mditrolio]

• Specify the version of the devextreme-angular and devextreme packages you are using. devexteme version: 17.2.7 devextreme-angular version: 17.2.7

• Specify the type of the issue (check one with "x"): [x] bug Report [ ] feature request [ ] support inquiry

We're trying to upgrade our project to Angular 6, but we see the following error when including any Dx* modules:

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'c:\Source\TestProject\node_modules\jszip\lib'

I've tried creating a clean Angular 6 project and just adding DevExtreme, but the results are the same.

[keserwan]

module.exports = require("readable-stream"); //module.exports = require("stream");

just replace this line of code in the file ("readable-stream-browser.js") until it is fixed by Angular/CLI

[keserwan]

I migrated today to angular 6 with devextreme 17.2.7 everything went well :) and I had to do this replace above.

[GoshaFighten]

This is a change in Angular CLI 6. It's necessary to register JSZip in the tsconfig.json file as described in the https://github.com/angular/angular-cli/issues/9827#issuecomment-369647555 issue.

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

[wartab]

When I try this solution, I get the following error:

ERROR in ./node_modules/devextreme/client_exporter/excel_creator.js
Module not found: Error: Can't resolve 'C:\Users\Vincent Lycoops\projects\wa\src\node_modules\jszip\dist\jszip.min.js' in 'C:\Users\Vincent Lycoops\projects\wa\node_modules\devextreme\client_exporter'

It's trying to include jszip from src/node_modules rather than node_modules.

I have "fixed" this by temporarily replacing the path by the full path.

[keserwan]

    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    }

put 2 dots before "node_modules"

[wartab]

That might fix it in devextreme's case, but I have other dependencies relying on correct behavior for jszip inclusion.

[jakehockey10]

I've followed the suggested fix, and I'm still getting the same issue. The difference for me is that I am working with an Angular 6 workspace that has multiple applications in it. I've made the "paths": {...} addition to one of the applications' tsconfig.app.json file, and I had to add two more ../ to the path, like this:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [],
    "paths": {
      "jszip": ["../../../node_modules/jszip/dist/jszip.min.js"]
    }
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

But I still get the same error. Is there anything I have to do differently when working in a workspace instead of a single application repo?

[GoshaFighten]

@jakehockey10 . I suggest you check what error message you are getting. For example, you may have your project in the C:\MyProject folder and the error says that Can't resolve module 'C:\node_modules\jszip\dist\jszip.min.js' in .... This means that you need to remove one ../ from the path to node_modules/jszip/dist/jszip.min.js. If the error says that Can't resolve module 'C:\MyProject\SomeOtherFolder\node_modules\jszip\dist\jszip.min.js' in ..., this means you need to add one more ../. And so on.

[jakehockey10]

@GoshaFighten , I tried a bunch of variations of this. And I started to notice the point you made about the path in the error message. But when I got the right amount of ../ in there to get the path correct in the error message, the error message was still there. But then I saw that I added this to tsconfig.app.json instead of tsconfig.json. Once I moved it to the root tsconfig.json, and adjusted the path to node_modules again, this seems to work now. Thanks for taking a look!

[ssamayoa]

I just bumped with this problem with DX 18.1.3, this is what "ng version" reports:

Angular CLI: 6.0.3
Node: 8.11.2
OS: win32 x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

I tried the solution modifying tsconfig.json (note that my project does not have tsconfig.app.json found in src) without luck. I haven't did any weird thing, just added DxXXXXModule.

Only way to avoid the error is commenting the ONLY line I found in ./node_modules/jszip/lib/readable-stream-browser.js:

module.exports = require("stream"); This is little frustrating, any help will be appreciated.

[jakehockey10]

@ssamayoa, it was indeed the case for me that I had to add this fix in tsconfig.json and double check that my relative paths were correct. As mentioned already, the error message should give a pretty good clue as to what's wrong with the related be path if you scrutinize the path in the error message. You might see a folder missing or something that can help you figure out what your relative paths need to be.

[wartab]

I repeat: you should not have to play around with relative paths. This is a bug, the path in there is supposed to be relative to the folder that contains node_modules, not something random that depends on some magic. Therefore this issue should not be closed.

[ssamayoa]

@wartab You mean a bug on DevExpress, algular-cli or in node? Sorry if question sounds dumb but I'm not an expert on node.

[ardymalihi]

funny, I did npm install stream and worked for me :)

[jamesidw]

Can confirm... installing stream sorts this out. Thanks @ardymalihi

[jaypeelh]

installing stream worked.

[charce36]

Installing npm "stream" works for me.

npm install stream --save

[wartab]

Installing random packages that happen to have the name of a NodeJS API, but haven't been updated for 6 years... What a smart choice. Please request from Devextreme to patch this issue instead of "making it work" on your side with band-aids.

[jaykumar1210]

I did npm install stream and worked for me too

[Pavel-Shulepov]

npm install stream --save помогло!

[carlosariash]

Installing npm "stream" works for me.

npm install stream --save

[hairangsua]

npm install stream --save works for me

[robertleeplummerjr]

I was able to use the semi-non invasive fix from: https://github.com/BrainJS/brain.js/issues/326#issuecomment-451687898 if this helps anyone else.

[AsadiMajid]

npm install stream --save works for me

[vecchiotom]

npm install stream --save works for me too

[briosheje]

Still experiencing the same issue with Angular 7, Devextreme ^18.2.3 and ionic 4.

[ahasan09]

npm install stream --save works for me too :)

[briosheje]

Is any fix for this issue even planned? It doesn't seems to be greatest choice ever to actually install a repository having more than 6 years of inactivity.

[cecilialimay]

npm install stream funciona para mi en angular 7

[tmtron]

so installing the stream package seems to be no good idea, but registering JSZip in the tsconfig.json file (as suggested here), does not work for me, because then the build fails with this:

Error:(9, 24) TS7016: Could not find a declaration file for module 'jszip'. 'ROOT/node_modules/jszip/dist/jszip.min.js' implicitly has an 'any' type.

see this Stackoverflow question for details.

So does someone know a solution that fixes both issues?

[Gamester2097]

module.exports = require("readable-stream"); //module.exports = require("stream");

just replace this line of code in the file ("readable-stream-browser.js") until it is fixed by Angular/CLI

This worked for me

[Domvel]

The npm package stream is about 5..7 years old in version 0.0.2. (dead) ... No, thanks. But for now, solved by adding the path in tsconfig as workaround.

{
  "compilerOptions": {
    "paths": {
      "jszip": ["node_modules/jszip/dist/jszip.min.js"]
    }
  }
}

[gabrielbarceloscn]

    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    }

put 2 dots before "node_modules"

thanks !!! this worked for me.

[HFTSOL]

Using version 19.1.6 and this is still broken. Is there any intent to fix this issue?

[wartab]

There's no intent on their end. They say it's not caused by them and stopped replying since then. After this issue and several others, we have started migrating all our Devextreme components to mainly Material Design. The performance gains are gigantic, too.

[ssamayoa]

I no longer have this problem with Angular 8.x

[priyankawadekar]

There's no intent on their end. They say it's not caused by them and stopped replying since then. After this issue and several others, we have started migrating all our Devextreme components to mainly Material Design. The performance gains are gigantic, too. @wartab Can you please tell which material plugin is best to replace JSZip ?

[priyankawadekar]

I am still facing this issue in angular 8 - [INFO] ERROR in ./node_modules/jszip/lib/readable-stream-browser.js [INFO] Hash: a6936540e76501d0d1ae [INFO] Module not found: Error: Can't resolve 'stream' in 'D:\Workspace\node_modules\jszip\lib'

[MoAsmar]

it is a bug in "readable-stream" itself, it is missing package stream in the dependencies.

you have to install stream npm i stream

[bvdwalt]

it is a bug in "readable-stream" itself, it is missing package stream in the dependencies.

you have to install stream npm i stream

Thanks man, sorted it out for me.

[secret-dave]

The guide to adding DevExtreme to an Angular application has this step defined: JSZip Registration, and it fixes the issue.

[tmtron]

For me the issue is now solved in jszip version 3.3.0: see Fix browser module resolution #614

I don't need the outdated stream package or use the JSZip Registration workaround (which broke my typescript type resolution: see SO typescript does not find jszip types)