Ropsten Networks is Undefined

Question

I'm trying to connect the Ropsten TestNet on Metamask to my project. But I have a problem that I haven't been able to solve for days. I made a definition as follows on the page I want to redirect.

And I wanted it to give me a message when I wanted it to be an error. I am getting exactly that error right now. 'Make sure you are on the corrent network. Set the network to Ropsten Test Network'

publicdashboard.jsx

    useEffect(() => {
        const init = async () => {
            try {
                const web3 = await getWeb3();
                const accounts = await web3.eth.getAccounts();
                const networkId = await web3.eth.net.getId();
                const deployedNetwork = Project.networks[networkId];
                if(deployedNetwork === undefined)
                    throw new Error('Make sure you are on the corrent network. Set the network to Ropsten Test Network');
                const contract = new web3.eth.Contract(
                    Project.abi,
                    deployedNetwork.address,
                );
                setWeb3(web3);
                setAccounts(accounts);
                setContract(contract);
            } catch (error) {
                window.alert(error);
                history.push("/dashboard");
            }
        }
        init();
        if (isReady()) {
            window.ethereum.on('accountsChanged', accounts => {
                setAccounts(accounts);
            });
        }
    }, [history]);

And this is my truffle-config.js file. Everything seems normal. I don't understand why it is not connecting. Can you help me with this?

const path = require("path");

const HDWalletProvider = require('@truffle/hdwallet-provider');

const fs = require('fs');
const mnemonic = fs.readFileSync(".secret").toString().trim();

module.exports = {
  
  contracts_build_directory: path.join(__dirname, "src/contracts"),
  networks: {
    ropsten: {
      provider: () => new HDWalletProvider(mnemonic, 'https://ropsten.infura.io/v3/08ac778579d74dbaa8d2e3d02e5c0092'),
      network_id: 3, // Ropsten's id
      gas: 5500000, // Ropsten has a lower block limit than mainnet
      confirmations: 2, // # of confs to wait between deployments. (default: 0)
      timeoutBlocks: 200, // # of blocks before a deployment times out  (minimum/default: 50)
      skipDryRun: false // Skip dry run before migrations? (default: false for public nets )
    },
  },

  mocha: {
    // timeout: 100000
  },

  compilers: {
    solc: {
      //version: "0.8.13",      // Fetch exact version from solc-bin (default: truffle's version)
      // docker: true,        // Use "0.5.1" you've installed locally with docker (default: false)
      // settings: {          // See the solidity docs for advice about optimization and evmVersion
      //  optimizer: {
      //    enabled: false,
      //    runs: 200
      //  },
      //  evmVersion: "byzantium"
      // }
    }
  },

 }
};

And also I wrote the terminal this code "truffle migrate --network ropsten". I didn't see any error.

Answer 1

for future reference, do not post your api key that starts with 08ac7785... This means that anyone can use it, delete the api key if possible. It also seems that your Project namespace is not valid. A better new solution than to use HDWalletProvider, is to use the new truffle dashboard command to connect with metamask, which is connected to your hardware wallet