web3_1.default is not a constructor

[slam9z]

Hi,
I received the error message: "web3_1.default is not a constructor"
The project dependencies are:
angular 5,
"web3": "^1.0.0-beta.26",
"@angular/cli": "^1.6.7"

I didn't modified the web3.service.ts as its original, however, the app detected metamask is installed and throw the error when reach below line in the bootstrapWeb3()
this.web3 = new Web3(window.web3.currentProvider);

Please help!!!

[kmturley]

This seems related to this error:
#22

[slam9z]

@kmturley: Thanks for your response!
I try with all the possible solutions found and seems like the only workable sol for me is below:

# web3.service.ts
const Web3 = require('web3');
declare var require: any;

Do you have any ideas what may cause this issue?

[kmturley]

I think it's also related to the version of Web3. I was getting issues with:
"web3": "^1.0.0-beta.30"

but not with:
"web3": "^0.19.1"

You can downgrade using the command:
npm install [email protected] --save

[kmturley]

Also there are other gotchas with the tools, so reset everything when testing:

1. Close and reopen ganache
2. Run truffle and angular commands again

truffle compile
truffle migrate
ng serve

3. If still having issues, try resetting MetaMask:
   MetaMask > Settings > Reset Account

[pimotte]

https://github.com/Quintor/angular-truffle-box/blob/master/tsconfig.json#L10

This line is what fixed the original issue for me. If anyone has a current configuration in which this error occurs, let me know. Downgrading web3 should not be necessary, but is indeed an approach.

[Muhammad-Altabba]

Facing the this exact error with a fresh download of this truffle box.
The copy already contains "allowSyntheticDefaultImports": true".

[pimotte]

@Muhammad-Altabba Could you let me know versions of: node, npm, angular-cli, truffle?

[Muhammad-Altabba]

Kindly find bellow:

node -v

v8.11.1

truffle version

Truffle v4.1.5 (core: 4.1.5)
Solidity v0.4.21 (solc-js)

npm version

{ 'angular-truffle-box': '0.0.0',
npm: '5.8.0',
ares: '1.10.1-DEV',
cldr: '32.0',
http_parser: '2.8.0',
icu: '60.1',
modules: '57',
nghttp2: '1.25.0',
node: '8.11.1',
openssl: '1.0.2o',
tz: '2017c',
unicode: '10.0',
uv: '1.19.1',
v8: '6.2.414.50',
zlib: '1.2.11' }

ng version

Angular CLI: 1.7.3
Node: 8.11.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@'angular/cli: 1.7.3
@'angular/language-service: 4.4.6
@'angular-devkit/build-optimizer: 0.3.2
@'angular-devkit/core: 0.4.8
@'angular-devkit/schematics: 0.3.2
@'ngtools/json-schema: 1.2.0
@'ngtools/webpack: 1.10.2
@'schematics/angular: 0.3.2
@'schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

[pimotte]

Thank you! And web3 version? The error occurring is exactly the same, with web3, rather than some other package?

[Muhammad-Altabba]

I am facing the issue while using the current fresh version of this box. So web3 version is the same mentioned at current package.json:
"web3": "1.0.0-beta.33"
Thanks,

[pimotte]

I take it you've used truffle unbox? Does the problem also exist if you git clone the repo to a clean directory and run npm install instead? (All other instructions are the same)

[Muhammad-Altabba]

Unfortunately, both truffle unbox , and cloning the repository to a clean directory and running npm install , led to the same issue.

[pimotte]

Does it also occur when using ng serve -prod, instead of ng serve? And 1.0.0-beta.33 is also the web3 version in the package-lock.json

[Muhammad-Altabba]

It works with ng serve -prod (1.0.0-beta.33 is also the web3 version in the package-lock.json)

However, I noticed at at package-lock.json that web3 required version for the project is 1.0.0-beta.33:

    "web3": {
      "version": "1.0.0-beta.33",
      "resolved": "https://registry.npmjs.org/web3/-/web3-1.0.0-beta.33.tgz",
      "integrity": "sha1-xgIbV2mSdyY3HBhLhoRFMRsTkpU=",
      "requires": {
        "web3-bzz": "1.0.0-beta.33",
        "web3-core": "1.0.0-beta.33",
        "web3-eth": "1.0.0-beta.33",
        "web3-eth-personal": "1.0.0-beta.33",
        "web3-net": "1.0.0-beta.33",
        "web3-shh": "1.0.0-beta.33",
        "web3-utils": "1.0.0-beta.33"
      }
    },

But truffle-contract depends on version 0.20.6 of web3:

    "truffle-contract": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/truffle-contract/-/truffle-contract-3.0.4.tgz",
      "integrity": "sha512-/1LCtJFf5Jvm5Rv88T0d/rZSKvaiW/yO1SHXLGJgKzLsiG1F/2spFs4HrI1mRxP00opfrYXloEmLtkVV/kcndQ==",
      "dev": true,
      "requires": {
        "ethjs-abi": "0.1.8",
        "truffle-blockchain-utils": "0.0.4",
        "truffle-contract-schema": "2.0.0",
        "truffle-error": "0.0.2",
        "web3": "0.20.6"
      },
      "dependencies": {
        "crypto-js": {
          "version": "3.1.8",
          "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.8.tgz",
          "integrity": "sha1-cV8HC/YBTyrpkqmLOSkli3E/CNU=",
          "dev": true
        },
        "web3": {
          "version": "0.20.6",
          "resolved": "https://registry.npmjs.org/web3/-/web3-0.20.6.tgz",
          "integrity": "sha1-PpcwauAk+yThCj11yIQwJWIhUSA=",
          "dev": true,
          "requires": {
            "bignumber.js": "git+https://github.com/frozeman/bignumber.js-nolookahead.git#57692b3ecfc98bbdd6b3a516cb2353652ea49934",
            "crypto-js": "3.1.8",
            "utf8": "2.1.1",
            "xhr2": "0.1.4",
            "xmlhttprequest": "1.8.0"
          }
        }
      }
    }

[pimotte]

Yep. The difference between web 1.x and 0.20 is by design.

Does ng test result in successful tests?

This issue looks a lot like #31, which I resolved in #33. Does it work if you change the module system and/or target in https://github.com/Quintor/angular-truffle-box/blob/master/src/tsconfig.app.json.

Also, what browser are you using?

[pimotte]

@Muhammad-Altabba Above pull request should have fixed it. If not, could you let me know?

[Muhammad-Altabba]

@pimotte Greate. However, I used the latest version and I came with another issue that I raised here #35
Thanks for your collaboration.

[sergeym610]

ERROR TypeError: web3_1.default is not a constructor
This problem was made me crazy a few days.
I used "npm install web3 --save" command and import Web3 from 'web3';
So, the error occurred!
In my experience, I removed "import Web3 from 'web3';" and added new lines like
"declare let Web3: any;
declare let web3;"

It works correctly for me.
I hope that this is correct resolve.
Thanks