web3_1.default is not a constructor

slam9z commented 6 years ago

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 commented 6 years ago

This seems related to this error: https://github.com/Quintor/angular-truffle-box/issues/22

slam9z commented 6 years ago

@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 commented 6 years ago

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 web3@0.19.1 --save

kmturley commented 6 years ago

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

Close and reopen ganache

Run truffle and angular commands again

truffle compile
truffle migrate
ng serve

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

pimotte commented 6 years ago

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 commented 6 years ago

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

pimotte commented 6 years ago

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

Muhammad-Altabba commented 6 years ago

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 commented 6 years ago

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

Muhammad-Altabba commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

pimotte commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

Muhammad-Altabba commented 6 years ago

@pimotte Greate. However, I used the latest version and I came with another issue that I raised here https://github.com/Quintor/angular-truffle-box/issues/35 Thanks for your collaboration.

sergeym610 commented 6 years ago

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

Quintor / angular-truffle-box

web3_1.default is not a constructor #26