Remix IDE + Ganache vs Truffle + Ganache

Question

I have an issue migrating a smart contract from Truffle into Ganache. However, when I run the same smart contract from Remix IDE via MetaMask into Ganache, everything works fine.

To bypass the migrating error, I was thinking of using the Remix IDE ABI.js file instead of the Contract.json file that Truffle compiles. However, I am getting an error:

Contract has not been deployed to the detected network (network/artifact) mismatch.

I can't understand why does the contract work when deploying form Remix and interacting with it in Remix, and it doesn't when I use the ABI generated by Remix in my Web3js functions?

UPD: This is the React Component (based on Truffle React boilerplate) that I'm trying to work with. Here, ContractOne.json is the one that is generated by truffle compile. Had the truffle migration worked correctly, this would have worked.

import React, { Component } from "react";
import ContractOne from "../../../build/contracts/ContractOne.json";
import getWeb3 from "../../utils/getWeb3";

export class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      web3: null,
      account: ""
    };
  }

  componentWillMount() {
    getWeb3
      .then(results => {
        this.setState({
          web3: results.web3
        });
        this.getAccount();
      })
      .catch(() => {
        console.log("Error finding web3.");
      });
  }

  async getAccount() {
    const contract = require("truffle-contract");
    const contractone = contract(ContractOne);

    powerether.setProvider(this.state.web3.currentProvider);
    let instance = await contractone.at(
      "CONTRACT ADDRESS"
    );
    this.state.web3.eth.getAccounts((error, accounts) => {
      instance => {
      return this.setState({ account: accounts[0] });
      };
   });
    });
  }

  render() {
    return (
      <div className="screen-one">
        <div className="h1">{this.state.account}</div>
      </div>
    );
  }
}

truffle.js

module.exports = {
  // See 
  // for more about customizing your Truffle configuration!
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    }
  }
};

Answer 1

Usually I don’t have issues with that, I deploy contracts via Remix and communicate from dapp via Truffle+Web3js. Even sometimes Truffle is not needed (e.g. no unit tests) then I use Web3js only.

1. Make sure you connect to the same network or emulator (with right network Id)
2. If you use Truffle, make sure, that you use Truffle artifact (compile contract via Truffle)
3. If you use Web3js, ABI of contract should be enough to instantiate contract

UPDATE Truffle+Web3js

import contract from 'truffle-contract';
import ContractOne from './../../build/contracts/ContractOne.json';

const contractOne = contract(ContractOne);
contractOne.setProvider(web3.currentProvider);

var instance = await contractOne.at(<address>);

var balance = await instance.getBalance(); // call functions ...