Can't import Web3 v4.x in typescript

[Loque18]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I created a new angular project and installed [email protected], I tried importing it using

import { Web3 } from 'web3';

and this errors showed up

Expected Behavior

to be allowed to import web 3 like this import { Web3 } from 'web3';

Steps to Reproduce

ng new app
npm i [email protected]

paste the following code in app.component.ts

import { Component } from '@angular/core';

import { Web3 } from 'web3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'eth';
}

Web3.js Version

4.0.1-alpha.5

Environment

• Operating System: w10
• Browser: chrome
• Node.js Version: 16.x
• NPM Version: 9.2.0

Anything Else?

No response

[nikoulai]

Hi @Loque18, thanks for reaching out

Have you tried setting esModuleInterop flag to true as a workaround?

[Loque18]

Hi @Loque18, thanks for reaching out

Have you tried setting esModuleInterop flag to true as a workaround?

Hi @nikoulai, thanks for your response, yes, actually it was in my tsconfig by default

[Loque18]

I found out something, if I do
import Web3 from 'web3';
instead of
import {Web3} from 'web3';

eslint stops linting but then new errors show up in the console

Build at: 2023-03-10T11:38:53.181Z - Hash: fce1534d7aca1afe - Time: 575ms

./node_modules/cipher-base/index.js:2:16-43 - Error: Module not found: Error: Can't resolve 'stream' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

./node_modules/ethereumjs-util/dist.browser/account.js:34:31-48 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/ethereumjs-util/dist.browser/address.js:12:31-48 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/ethereumjs-util/dist.browser/object.js:12:31-48 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/web3-providers-ipc/lib/index.js:6:14-28 - Error: Module not found: Error: Can't resolve 'net' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\web3-providers-ipc\lib'

./node_modules/web3-providers-ipc/lib/index.js:9:13-26 - Error: Module not found: Error: Can't resolve 'fs' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\web3-providers-ipc\lib'

./node_modules/web3-utils/lib/random.js:7:17-34 - Error: Module not found: Error: Can't resolve 'crypto' in 'C:\Users\DELL\Documents\orcania\delete\eth\node_modules\web3-utils\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

[spacesailor24]

I may have been mistaken with the below response. @luu-alex mentioned that this could be the result of not specifying browser in the package.jsons of the packages the make use of polyfills. This was addressed in #5964, but has not yet been released yet. If you could share a repo that reproduces the errors you've received, then we can assist you in testing if #5964 solves these issues, but if you can't, then you'll need to wait until we release 4.0.1-rc.0. Alternatively, you could also use version 4.0.1-alpha.5 of web3 and add the browser entry in package.json to taget web3.min.js (as done in #5964)

---

Hi @Loque18, apologies for the late reply, but these Error: Module not found: Error: Can't resolve errors are to be expected as by using Angular you're build setup is mostly likely trying to bundle all your code to run within the browser. These modules mentioned in your errors: stream, assert, net, fs, and crypto are available when the code is running using Node.js, but not when your code is running in the browser (which uses a subset of the Node.js' code). To fix this, you must polyfill the missing modules like so:

In your web3pack.config.js you must add:

resolve: {
    extensions: ['.ts', '.js'],
    fallback: {
        fs: false,
        net: false,
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('readable-stream'),
    },
}

And as devDependencies, you'll need to npm i -D or yarn add -D the following packages:

• assert
• crypto-browserify

This might not completely resolve all the errors you're facing, so if you're still having troubles, please share the repo you're trying to install 4.x into so we can aid in debugging

Lastly, using import Web3 from 'web3'; is the intended use as web3 is the default export and not a named export which is required to use the syntax import { web3 } from 'web3';

[Loque18]

Hi @spacesailor24 and thanks for answering this issue,

Sorry for the late reply, I updated the version to @4.0.1-rc.0, the error is no longer being marked by vscode, shamefully there are a some errors on the console, these are the errors, looks like they are related to the way they are imported in some part of the core code I guess, all of them are of type This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Error: node_modules/ethereumjs-util/dist/externals.d.ts:6:8 - error TS1259: Module '"C:/Users/DELL/Documents/orcania/cel-w3/node_modules/@types/bn.js/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

6 import BN from 'bn.js';
         ~~

  node_modules/@types/bn.js/index.d.ts:598:1
    598 export = BN;
        ~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Error: node_modules/rlp/dist/types.d.ts:2:8 - error TS1259: Module '"C:/Users/DELL/Documents/orcania/cel-w3/node_modules/@types/bn.js/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

2 import BN from 'bn.js';
         ~~

  node_modules/@types/bn.js/index.d.ts:598:1
    598 export = BN;
        ~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Error: node_modules/web3-providers-ws/lib/index.d.ts:4:8 - error TS1259: Module '"C:/Users/DELL/Documents/orcania/cel-w3/node_modules/isomorphic-ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

4 import WebSocket, { ClientOptions, CloseEvent } from 'isomorphic-ws';
         ~~~~~~~~~

  node_modules/isomorphic-ws/index.d.ts:8:1
    8 export = WebSocket
      ~~~~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

I created a repo repo so that you can check the issues by yourself,

regarding the last part import web3 from 'web3' in the docs it says that it needs to be required with {web3} here, maybe the docs need an update?

thanks for your help by the way :) !

[spacesailor24]

Hey @Loque18, thanks for getting back to us!

As the error messages mention, it looks like you need to enable allowSyntheticDefaultImports in your tsconfig.json like so. Thank you for mentioning the outdated docs, I've created an issue to track this