Ich versuche, eine DApp, die web3.js verwendet, von JavaScript in TypeScript zu konvertieren, aber ich bin auf eine Reihe von Laufzeitfehlern gestoßen. Ich verwende Visual Studio Code IDE und kompiliere zu ES6. Ich habe das Projekt auf den kleinsten Code reduziert, der diese Probleme noch hat.
Kann mir jemand helfen, das zu beheben? Danke im Voraus!
(Falls ich wichtige Informationen vergessen habe, können Sie dies gerne kommentieren.)
NPM-Pakete:
@types/web3 (Version 1.0.12)
web3 (Version 1.0.0-beta.36)
Website:
<script src="system.js"></script>
<script>
System.config({
baseURL: './out',
packages: {
'./out': {
defaultJSExtensions: 'js'
}
},
meta: {
'*': {
format: 'register'
}
},
});
window.addEventListener("load", (async function(){
await System.import("init");
}));
</script>
Init.ts:
import Web3 from "web3";
const ABI: any[] = [];
let web3: Web3;
export async function init()
{
if (typeof (window as any).web3 !== "undefined")
{
const injectedWeb3: Web3 = ((window as any).web3 as Web3);
web3 = new Web3(injectedWeb3.currentProvider); // This line produces the error: TypeError: web3_1.default is not a constructor
}
else
{
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
const myABIinstance = new web3.eth.Contract(ABI);
}
init();
Der vollständige Stack-Trace des Laufzeitfehlers:
TypeError: web3_1.default is not a constructor
init.ts:10
at /home/jesse/MinimalWeb3Typescript/init.ts:10:16
at Generator.next (<anonymous>)
at /home/jesse/MinimalWeb3Typescript/out/init.js:8:76
at new Promise (<anonymous>)
at __awaiter (/home/jesse/MinimalWeb3Typescript/out/init.js:4:17)
at init (/home/jesse/MinimalWeb3Typescript/out/init.js:14:17)
at Object.execute (/home/jesse/MinimalWeb3Typescript/init.ts:18:1)
at U (/home/jesse/MinimalWeb3Typescript/system.js:4:8818)
at /home/jesse/MinimalWeb3Typescript/system.js:4:11430
at /home/jesse/MinimalWeb3Typescript/system.js:4:11499
Wenn Sie ein aktuelles Web3 (z. B. 1.0.0-beta.50) verwenden, besteht eine mögliche Abhilfe darin, Folgendes einzustellen esModuleInterop:
{
"compilerOptions": {
"esModuleInterop": true
}
}
Versuchen Sie, Ihren Code wie folgt zu ändern:
const Web3 = require('web3');
declare var window: any;
const ABI: any[] = [];
let web3: any;
export async function init()
{
if (typeof window.web3 !== 'undefined') {
// Use Mist/MetaMask's provider
this.web3 = new Web3(window.web3.currentProvider);
}
else {
console.warn('No web3 detected.');
}
}
init();
und erstmal prüfen ob es funktioniert. Wenn dies der Fall ist, können Sie die anderen Änderungen vornehmen.
Web3es erwähnt wird:init.ts:8:11 - error TS2304: Cannot find name 'Web3'.Error: require is not defined. Ich mache wahrscheinlich etwas falsch mit NPM-Paketen und SystemJS. Es ist das erste Mal, dass ich mit ihnen arbeite.
Nikita Fuchs
Jesus