Module not found: Error: Can't resolve 'crypto' in 'C:

Question

Module not found: Error: Can't resolve 'crypto' in 'C:

Opened this issue 7 years ago · 25 comments

Deleted user commented 7 years ago

To get help from the community, check out our Google group.

TensorFlow.js version

"@tensorflow/tfjs": "^0.12.0",

Browser version

Version 67.0.3396.99 (Official Build) (64-bit)

Describe the problem or feature request

I am using angular 6 with tensorflow.js in the latest versions of tensorflow I get a warning in the console that somme crypto module is not found I have this warning all the time, what should I do/?

Code to reproduce the bug / link to feature request

import * as tf from '@tensorflow/tfjs';

import { Component, OnInit } from '@angular/core';
import * as tf from '@tensorflow/tfjs';



@Component({
  selector: 'app-xor-example',
  templateUrl: './xor-example.component.html',
  styleUrls: ['./xor-example.component.css']
})
export class XorExampleComponent implements OnInit {

  // TRAINING DATA.
  x_train = tf.tensor2d([[0, 0], [0, 1], [1, 0], [1, 1]]);
  y_train = tf.tensor2d([[0], [1], [1], [0]]);

  // Defining a model.
  model: tf.Sequential;

  constructor() { }

  ngOnInit() {

  }

  async initModel() {

    this.model = tf.sequential();
    this.model.add(tf.layers.dense({ units: 8, inputShape: [2], activation: 'tanh' })); // input layer
    this.model.add(tf.layers.dense({ units: 1, activation: 'sigmoid' })); // output layer
    const optimizer = tf.train.sgd(0.01);
    this.model.compile({
      optimizer: optimizer,
      loss: 'binaryCrossentropy',
    });


    // Creating dataset
    const xs = tf.tensor2d([[0, 0], [0, 1], [1, 0], [1, 1]]);
    xs.print();
    const ys = tf.tensor2d([[0], [1], [1], [0]]);
    ys.print();
    // Train the model
    await this.model.fit(xs, ys, {
      batchSize: 1,
      epochs: 1500
    });

    const saveResults = await this.model.save('localstorage://my-model-1');

    const loadedModel = await tf.loadModel('localstorage://my-model-1');
    console.log('Prediction from loaded model:');
    // loadedModel.predict(tf.ones([1, 3])).print();

    this.prediction = this.model.predict(xs);
    console.log(this.prediction);

  }

}

this is from chrome console

Uncaught ReferenceError: global is not defined
    at Object../node_modules/protobufjs/src/util/minimal.js (minimal.js:49)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/protobufjs/src/writer.js (writer.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/protobufjs/src/index-minimal.js (index-minimal.js:13)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/protobufjs/minimal.js (minimal.js:4)
    at __webpack_require__ (bootstrap:76)
    at Object../node_modules/@tensorflow/tfjs-converter/dist-es6/data/compiled_api.js (compiled_api.js:1)
    at __webpack_require__ (bootstrap:76)

and this is what I see in the console

Answer 1 · 2018-07-05T20:23:31.000Z

I have tried it to install crypto but again is not working, all versions from 10.0 and above is not working on angular projects I am not sure if they don't work on any typescript version
npm i crypto-js

Answer 2 · 2018-07-06T16:39:07.000Z

Can you please provide us a link to the source that we can fork/download? This will help with investigation.

Answer 3 · 2018-07-06T17:06:06.000Z

@nkreeger I have created a repo you can run inside the root folder : npm install
after the installation run ng serve
this should create a server on http://localhost:4200/xor
check the console both on vscode or google chrome

you can clone the ptoject https://github.com/George35mk/example-tf-error.git

Answer 4 · 2018-07-06T17:13:11.000Z

@nkreeger thank you for looking on this

Answer 5 · 2018-07-06T18:07:24.000Z

The same happens with stackblitz.com @nkreeger

https://stackblitz.com/edit/angular-eu4cjy

Answer 6 · 2018-07-07T10:50:39.000Z

What I have found so far is that:
crypto is now part of the node.js core

And I think the tensorflow.js is not working on any newest angular application.
I can't do anything about this.

Answer 7 · 2018-07-09T18:26:42.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:

// old:
node: false,
// new:
node: { crypto: true, stream: true },

I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

Answer 8 · 2018-07-11T20:28:36.000Z

@nkreeger Thank you very much.

I am surprised how you find the solution.

Answer 9 · 2018-07-31T15:44:42.000Z

not fixed Yet!

Answer 10 · 2018-08-26T06:02:33.000Z

This issue is related to another one that is 2 years old ...

guys common ...

Answer 11 · 2018-10-30T22:01:48.000Z

@George35mk please let us know if this is still an issue ?

Answer 12 · 2018-11-01T02:49:44.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

I love you

Answer 13 · 2018-11-09T21:46:55.000Z

Automatically closing due to lack of recent activity. Please update the issue when new information becomes available, and we will reopen the issue. Thanks!

Answer 14 · 2018-11-14T08:49:10.000Z

While the original issue was an error, it is now manifested as a warning on my system.

WARNING in ./node_modules/@tensorflow/tfjs-core/dist/tf-core.esm.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\user\github\repo.github.io\source\node_modules\@tensorflow\tfjs-core\dist'

My Angular app works as expected in the browser.

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.2.5
Node: 8.11.1
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.5
@angular-devkit/build-angular     0.8.5
@angular-devkit/build-optimizer   0.8.5
@angular-devkit/build-webpack     0.8.5
@angular-devkit/core              0.8.5
@angular-devkit/schematics        0.8.5
@angular/cdk                      6.4.7
@angular/cli                      6.2.5
@angular/material                 6.4.7
@angular/pwa                      0.7.5
@ngtools/webpack                  6.2.5
@schematics/angular               0.8.5
@schematics/update                0.8.5
rxjs                              6.3.3
typescript                        2.7.2
webpack                           4.20.2

Answer 15 · 2019-04-04T05:36:22.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

thank you. It helped me!!!!

Answer 16 · 2019-04-10T10:33:06.000Z

Because I needed to work with some 3D tensors I installed again the tensorflow.js package in my angular application, and again I get the same error:

Can't resolve 'crypto' in 'C:\Users\user....

what I found to solve this warnings without modifing any of the angular core files but only your package.json

try this on your package.json

{
  "scripts": { },
  "dependencies": { },
  "devDependencies": { },

  "browser": {
    "crypto": false
  }

}

Answer 17 · 2020-02-09T05:55:54.000Z

Because I needed to work with some 3D tensors I installed again the tensorflow.js package in my angular application, and again I get the same error:

Can't resolve 'crypto' in 'C:\Users\user....

what I found to solve this warnings without modifing any of the angular core files but only your package.json

try this on your package.json
{
  "scripts": { },
  "dependencies": { },
  "devDependencies": { },

  "browser": {
    "crypto": false
  }

}

Worked for me! Thank you!

Answer 18 · 2020-04-28T19:04:53.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

I love you. You save my time.

Answer 19 · 2020-05-29T03:54:43.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

感謝您這很有幫助

Answer 20 · 2020-07-02T18:37:33.000Z

Because I needed to work with some 3D tensors I installed again the tensorflow.js package in my angular application, and again I get the same error:

Can't resolve 'crypto' in 'C:\Users\user....

what I found to solve this warnings without modifing any of the angular core files but only your package.json

try this on your package.json
{
  "scripts": { },
  "dependencies": { },
  "devDependencies": { },

  "browser": {
    "crypto": false
  }

}

Thank you providing such a wonderful solution

Answer 21 · 2020-12-03T21:57:48.000Z

Hi @George35mk -

I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

Hope this helps!

I cannot find the file.

Answer 22 · 2020-12-10T08:52:10.000Z

Hi @George35mk -
I found a couple of cycles to try this out. It looks like this is a problem with the core-parts of the angular webpack bundler. I followed the steps here: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d
But instead of using a pre-install, I just hand edited `node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' and changed the lines in that regex:
// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954
Hope this helps!
I cannot find the file.

In angular 11, the path of the file changed. So the new file looks like this:

const fs = require('fs')
const f = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js'

fs.readFile(f, 'utf8', function(err, data) {
  if (err) {
    return console.log(err)
  }
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true, fs: "empty"}')

  fs.writeFile(f, result, 'utf8', function(err) {
    if (err) return console.log(err)
  })
})

Answer 23 · 2021-05-10T04:47:44.000Z

same issue 2021

Answer 24 · 2021-10-07T05:30:32.000Z

Same issue 2022

Answer 25 · 2022-02-11T14:59:21.000Z

I'm using React, and downgrading "react-scripts" version in package.json from "5.0.0" to "4.0.3" did the trick for me.