Angular 6: Can't resolve 'stream' #776

mditrolio · 2018-05-04T13:47:08Z

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.

The text was updated successfully, but these errors were encountered:

keserwan · 2018-05-04T19:11:57Z

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 · 2018-05-04T19:14:12Z

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

GoshaFighten · 2018-05-04T19:20:12Z

This is a change in Angular CLI 6. It's necessary to register JSZip in the tsconfig.json file as described in the angular/angular-cli#9827 (comment) issue.

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

wartab · 2018-05-07T07:39:04Z

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 · 2018-05-07T07:50:23Z

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

put 2 dots before "node_modules"

wartab · 2018-05-07T07:56:28Z

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

jakehockey10 · 2018-05-14T22:41:25Z

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 · 2018-05-15T20:43:23Z

@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 · 2018-05-15T22:05:41Z

@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 · 2018-05-20T00:48:07Z

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 · 2018-05-20T19:02:38Z

@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 · 2018-05-22T07:28:30Z

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 · 2018-05-25T01:02:40Z

@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 · 2018-06-05T17:44:06Z

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

jamesidw · 2018-06-06T10:56:31Z

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

jaypeelh · 2018-06-11T06:08:26Z

installing stream worked.

charce36 · 2018-06-21T15:38:46Z

Installing npm "stream" works for me.

npm install stream --save

wartab · 2018-06-22T07:12:37Z

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 · 2018-06-22T14:21:41Z

I did npm install stream and worked for me too

Pavel-Shulepov · 2018-08-08T08:54:27Z

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

carlosariash · 2018-10-28T22:49:35Z

Installing npm "stream" works for me.

npm install stream --save

hairangsua · 2018-12-09T10:34:07Z

npm install stream --save works for me

robertleeplummerjr · 2019-01-10T15:29:37Z

I was able to use the semi-non invasive fix from: BrainJS/brain.js#326 (comment) if this helps anyone else.

AsadiMajid · 2019-02-02T08:08:23Z

npm install stream --save works for me

vecchiotom · 2019-02-06T13:54:47Z

npm install stream --save works for me too

briosheje · 2019-02-22T10:22:43Z

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

ahasan09 · 2019-02-28T08:02:03Z

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

briosheje · 2019-02-28T08:19:19Z

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 · 2019-03-05T16:10:36Z

npm install stream funciona para mi en angular 7

See: DevExpress/devextreme-angular#776

tmtron · 2019-06-18T06:30:30Z

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 · 2019-07-18T10:51:54Z

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 · 2019-09-03T10:17:44Z

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 · 2019-09-26T15:10:06Z

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

put 2 dots before "node_modules"

thanks !!! this worked for me.

HFTSOL · 2019-10-28T21:22:43Z

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

wartab · 2019-10-28T22:10:19Z

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 · 2019-10-28T22:50:46Z

I no longer have this problem with Angular 8.x

priyankawadekar · 2019-12-09T13:56:47Z

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 · 2019-12-09T15:48:07Z

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 · 2019-12-24T14:16:27Z

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 · 2020-02-27T13:56:56Z

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.

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js Module not found: Error: Can't resolve 'stream' in '/home/niklas/Projekte/finanztopf/node_modules/jszip/lib' [ERROR] An error occurred while running subprocess ng. DevExpress/devextreme-angular#776

secret-dave · 2020-03-03T09:48:35Z

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

tmtron · 2020-04-11T07:18:45Z

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)

GoshaFighten self-assigned this May 4, 2018

GoshaFighten added the question label May 4, 2018

GoshaFighten closed this as completed May 4, 2018

ovchinnikov mentioned this issue May 7, 2018

ERROR in ./node_modules/devextreme/client_exporter/excel_creator.js #779

Closed

SanderElias mentioned this issue May 8, 2018

adding devextreme to angular 6 + cli 6 #775

Closed

GoshaFighten reopened this May 15, 2018

GoshaFighten closed this as completed May 15, 2018

aescarcha mentioned this issue Jul 4, 2018

Missing dependency 'stream' isaacs/sax-js#237

Open

robertleeplummerjr mentioned this issue Dec 27, 2018

Can't resolve 'stream' BrainJS/brain.js#326

Closed

helio-frota mentioned this issue Jan 9, 2019

Opossum with Angular 6 nodeshift/opossum#246

Closed

kimrutherford added a commit to pombase/website that referenced this issue Apr 2, 2019

Add stream NPM module to keep jszip happy

253e41f

See: DevExpress/devextreme-angular#776

babich-a mentioned this issue Jul 11, 2019

Export CSS file with icon fonts DevExpress/ThemeBuilder#105

Merged

callmeguaishu mentioned this issue Jun 5, 2020

nodestream not supported with 3.3.0 + Stuk/jszip#663

Open

This was referenced Aug 12, 2020

[EDITION] ReferenceError in EditionGraphModule webern-unibas-ch/awg-app#21

Closed

Issue with stream imports rdfjs/N3.js#216

Closed

Angular 6: Can't resolve 'stream' #776

Angular 6: Can't resolve 'stream' #776

Comments

mditrolio commented May 4, 2018

keserwan commented May 4, 2018

keserwan commented May 4, 2018 • edited Loading

GoshaFighten commented May 4, 2018

wartab commented May 7, 2018 • edited Loading

keserwan commented May 7, 2018 • edited Loading

wartab commented May 7, 2018

jakehockey10 commented May 14, 2018

GoshaFighten commented May 15, 2018

jakehockey10 commented May 15, 2018

ssamayoa commented May 20, 2018 • edited Loading

jakehockey10 commented May 20, 2018

wartab commented May 22, 2018 • edited Loading

ssamayoa commented May 25, 2018

ardymalihi commented Jun 5, 2018

jamesidw commented Jun 6, 2018

jaypeelh commented Jun 11, 2018

charce36 commented Jun 21, 2018

wartab commented Jun 22, 2018

jaykumar1210 commented Jun 22, 2018

Pavel-Shulepov commented Aug 8, 2018

carlosariash commented Oct 28, 2018

hairangsua commented Dec 9, 2018

robertleeplummerjr commented Jan 10, 2019

AsadiMajid commented Feb 2, 2019

vecchiotom commented Feb 6, 2019

briosheje commented Feb 22, 2019

ahasan09 commented Feb 28, 2019

briosheje commented Feb 28, 2019

cecilialimay commented Mar 5, 2019

tmtron commented Jun 18, 2019

Gamester2097 commented Jul 18, 2019

Domvel commented Sep 3, 2019 • edited Loading

gabrielbarceloscn commented Sep 26, 2019

HFTSOL commented Oct 28, 2019

wartab commented Oct 28, 2019

ssamayoa commented Oct 28, 2019

priyankawadekar commented Dec 9, 2019 • edited Loading

priyankawadekar commented Dec 9, 2019

MoAsmar commented Dec 24, 2019

bvdwalt commented Feb 27, 2020

secret-dave commented Mar 3, 2020

tmtron commented Apr 11, 2020

keserwan commented May 4, 2018 •

edited

Loading

wartab commented May 7, 2018 •

edited

Loading

keserwan commented May 7, 2018 •

edited

Loading

ssamayoa commented May 20, 2018 •

edited

Loading

wartab commented May 22, 2018 •

edited

Loading

Domvel commented Sep 3, 2019 •

edited

Loading

priyankawadekar commented Dec 9, 2019 •

edited

Loading