I'm thinking there's gotta be a way to load the abi (or the entire JSON build file) of a smart contract into my front-end Javascript app after compilation automatically - meaning via some kind of config script.
That way I don't have to copy-paste the abi into the Javascript code manually, after every single edit and compilation I make on my smart-contract.

But how?

NOTE: I'm not using Node.js here, we're talking pure front-end vanilla javascript file.

Webpack's website clearly states that: beginning with Webpack version 2.0.0 json loaders are no longer needed.
Well right now I'm trying this and getting an error:

import * as contractArtifact from "../build/contracts/MySmartContract.json"

The error is:

import declarations may only appear at top level of a module

For what it's worth, my code for instantiating the contract in my Javascript code - which works perfectly - is as follows:

contractArtifact = {
    "contractName": "MyContract",
    "abi": [
        "inputs": [
            "internalType": "string",
            "name": "name",
            "type": "string"

contractABI = contractArtifact["abi"];

// Get the Contract's ADDRESS:
network = Object.keys(contractArtifact.networks)[0];
contractAddress = contractArtifact.networks[network].address;

// Now instantiate the Contract using the ABI and the Address:
contractInstance = new web3Instance.eth.Contract(contractABI, contractAddress);

So this works perfectly - I just don't want to have to manually copy-paste that entire JSON file into here every single time I make the tiniest change to and then compile my smart-contract.

  • Turning an answer (now deleted) into a comment: The import and require statements are designated to be used for JS files only. They can be used in order to load code from another file into your JS script. What you are trying to do is to load data from another file into your JS script. If your JSON file started with module.exports = , then your import attempt would probably work. But that would effectively turn it from a JSON file into a JS file (regardless of the extension used). Nov 20, 2020 at 8:22
  • On NodeJS, with const fs = require("fs");, you could simply do: Nov 20, 2020 at 8:22
  • const contractArtifact = JSON.parse(fs.readFileSync("../build/contracts/MySmartContract.json", {encoding: "utf8"})); Nov 20, 2020 at 8:23
  • I don't think that you can do this (reading a file) from code running in a browser, so you'll need to do have a script loading the contents of that JSON file into your JS file dynamically (before sending it to the client side). Nov 20, 2020 at 8:24

1 Answer 1


In a js file use this:

  .then(response => response.json())
  .then(data => console.log(data));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.