Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'call' of undefined #11

Closed
johannesjo opened this issue May 16, 2020 · 14 comments
Closed

Cannot read property 'call' of undefined #11

johannesjo opened this issue May 16, 2020 · 14 comments

Comments

@johannesjo
Copy link

When using buffer (https://github.com/feross/buffer) I get the following error:

TypeError: Cannot read property 'call' of undefined
    at Hash.CipherBase (index.js:7)
    at new Hash (browser.js:9)
    at createHash (browser.js:29)
    at sha256x2 (index.js:8)
    at Object.encode (base.js:9)
    at Object.toBase58Check (address.js:35)
    at Object.publicKeyToAddress (keys.js:35)
    at Object.makeAuthRequest (authMessages.js:88)
    at UserSession.makeAuthRequest (userSession.js:142)
    at UserSession.redirectToSignIn (userSession.js:89)
@fanatid
Copy link

fanatid commented May 16, 2020

Line 7 is Transform.call(this).

Can you check that require('stream').Transform exists for your environment?

@johannesjo
Copy link
Author

It does not. In fact stream is an empty object. I get the feeling that the error is not related to this module. Sorry!

@gowtham-kumarappan
Copy link

@johannesjo Did you find the appropriate solution for above issue , because I facing the same issue

ERROR TypeError: Cannot read property 'call' of undefined at Hash.CipherBase (index.js:7) at new Hash (browser.js:9) at createHash (browser.js:29)

@johannesjo
Copy link
Author

@gowtham-kumarappan sorry, I don't really remember :/

@xcsob
Copy link

xcsob commented Jan 12, 2022

Did you find any solution to this problem?

@johannesjo
Copy link
Author

@xcsob now I remember even less. Sorry :)

@yabuking84
Copy link

So anybody has any solution to this? Thanks

@heytdep
Copy link

heytdep commented May 10, 2022

@yabuking84 and other devs having the same issue: this is because Stream is undefined on client-side (browser) since it only belongs to Node. You are going to need to add a polyfill for Stream: if you are using sveltekit (like me), you can do this in your svelte.config.js after having installed @esbuild-plugins/node-modules-polyfill:

import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

<other configs>

resolve: {
                alias: {
                    util: 'rollup-plugin-node-polyfills/polyfills/util',
                    sys: 'util',
                    events: 'rollup-plugin-node-polyfills/polyfills/events',
                    stream: 'rollup-plugin-node-polyfills/polyfills/stream',
                    path: 'rollup-plugin-node-polyfills/polyfills/path',
                    querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
                    punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
                    url: 'rollup-plugin-node-polyfills/polyfills/url',
                   
                    http: 'rollup-plugin-node-polyfills/polyfills/http',
                    https: 'rollup-plugin-node-polyfills/polyfills/http',
                    os: 'rollup-plugin-node-polyfills/polyfills/os',
                    assert: 'rollup-plugin-node-polyfills/polyfills/assert',
                    constants: 'rollup-plugin-node-polyfills/polyfills/constants',
                    _stream_duplex:
                        'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
                    _stream_passthrough:
                        'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
                    _stream_readable:
                        'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
                    _stream_writable:
                        'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
                    _stream_transform:
                        'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
                    timers: 'rollup-plugin-node-polyfills/polyfills/timers',
                    console: 'rollup-plugin-node-polyfills/polyfills/console',
                    vm: 'rollup-plugin-node-polyfills/polyfills/vm',
                    zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
                    tty: 'rollup-plugin-node-polyfills/polyfills/tty',
                    domain: 'rollup-plugin-node-polyfills/polyfills/domain'
                }
            },
			optimizeDeps: {
                esbuildOptions: {
                    define: {
                        global: 'globalThis'
                    },
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                            buffer: true
                        }),
                        NodeModulesPolyfillPlugin()
                    ]
                }
            },
            build: {
                rollupOptions: {
                    plugins: [
                        rollupNodePolyFill()
                    ]
                }
            }

@cah4a
Copy link

cah4a commented Jan 19, 2023

Solved this just by adding this:

export default defineConfig({
    // ......
    resolve: {
        alias: {
            stream: 'stream-browserify'
        }
    },
}

Should definitely be a part of the documentation.
As well as window.global = window.

@oguzutku1745
Copy link

Adding alias to my vue.config.js file fixed the problem after spending long time.
Check here: #10 (comment)

@nikita-fuchs
Copy link

Running into this issue in angular, the following saved me:

  1. npm install stream-browserify
  2. in tsconfig.json: Add this in:"compilerOptions": { [...] }
"paths" : {
      "stream": ["./node_modules/stream-browserify"],
    }

Found here, with more advice to potentially problematic packages: https://stackoverflow.com/questions/67572355/webpack-5-angular-polyfill-for-node-js-crypto-js

@Sayvai
Copy link

Sayvai commented Feb 25, 2024

@yabuking84 and other devs having the same issue: this is because Stream is undefined on client-side (browser) since it only belongs to Node. You are going to need to add a polyfill for Stream..

Stumbled across the same exception as the original poster of this issue, as part of a process to upgrade a project from Webpack 2 to 5.

Applied a similar solution as mentioned in the other comments of this issue.

But what is slightly different with my solution, is that I applied resolve.fallback, which "Redirect module requests when normal resolving fails.", instead of resolve.alias.

That way, it would attempt to resolve Node cores' own bundled stream module first, otherwise it would gracefully fallback to the equivalent web browser module stream-browserify (i.e. for use in browser / client side), while still aliased to stream module import references.

Important

You would also need to install the dependency module stream-browserify into the project.

For example, npm i stream-browserify, or yarn add stream-browserify

The Webpack 5 configuration change solution in my case, provided below: 👇

{
  // ....
  "resolve": {
    // ....
    "fallback": {
      // ....
      "stream": require.resolve('stream-browserify')
    }
  }
}

@semwaqas
Copy link

semwaqas commented Jun 7, 2024

I encountered a similar issue and managed to resolve it successfully. Here's the solution I implemented:

  1. Install the stream-browserify package by running the following command:

npm install stream-browserify

  1. Navigate to the cipher-base package directory and locate the index.js file within the node_modules/cipher-base directory.
  2. Within index.js, update the import statement for Transform as follows:

var Transform = require('stream-browserify').Transform; //Replace require('stream-browserify') with require('stream-browserify')

This modification should address the issue and ensure compatibility with the stream-browserify package.

Best regards,

@natecalc
Copy link

Solved this just by adding this:

export default defineConfig({
    // ......
    resolve: {
        alias: {
            stream: 'stream-browserify'
        }
    },
}

Should definitely be a part of the documentation. As well as window.global = window.

This worked perfectly for my VITE config :) Legend!!! 🤝

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.