title: TypeError: path.resolve is not a function
body: <p>I finished up an Ethereum smart contract course on Udemy that used solc@^0.4.17, React and Next.js. I thought it would be a fun exercise to try and upgrade everything to the latest version and try to refactor. I have the following code in a file called <code>factory.js</code> being imported into my main index file:</p>
  <pre><code>import web3 from './web3';
  const path = require('path');
  const fs = require('fs');
  
  const abiPath = path.resolve('ethereum/build', 'CampaignFactory.abi');
  console.log(abiPath);
  
  const abi = fs.readFileSync(abiPath, 'utf8');
  console.log(abi);
  
  const factory = new web3.eth.Contract(
      JSON.parse(abi),
      '0x2d54559dCe0DA6C92378A916e9eE0422CEFFCD80'
  );
  
  export default factory;
  </code></pre>
  <p>Inside of my main index file I'm calling it like so:</p>
  <pre><code>import factory from '../ethereum/factory';
  ...
  class CampaignIndex extends Component {
      static async getInitialProps() {
          const campaigns = await factory.methods.getDeployedCampaigns().call();
  
          return { campaigns };
      }
  ...
  </code></pre>
  <p>Here's the console.log:</p>
  <pre><code>    wait  - compiling /...
      event - compiled successfully in 637 ms (1422 modules)
      /Users/sonnyparlin/Github/kickstart/ethereum/build/CampaignFactory.abi
      [
        {
          &quot;inputs&quot;: [
            {
              &quot;internalType&quot;: &quot;uint256&quot;,
              &quot;name&quot;: &quot;minimum&quot;,
              &quot;type&quot;: &quot;uint256&quot;
            }
          ],
          &quot;name&quot;: &quot;createCampaign&quot;,
          &quot;outputs&quot;: [],
          &quot;stateMutability&quot;: &quot;nonpayable&quot;,
          &quot;type&quot;: &quot;function&quot;
        },
        {
          &quot;inputs&quot;: [
            {
              &quot;internalType&quot;: &quot;uint256&quot;,
              &quot;name&quot;: &quot;&quot;,
              &quot;type&quot;: &quot;uint256&quot;
            }
          ],
          &quot;name&quot;: &quot;deployedCampaigns&quot;,
          &quot;outputs&quot;: [
            {
              &quot;internalType&quot;: &quot;address&quot;,
              &quot;name&quot;: &quot;&quot;,
              &quot;type&quot;: &quot;address&quot;
            }
          ],
          &quot;stateMutability&quot;: &quot;view&quot;,
          &quot;type&quot;: &quot;function&quot;
        },
        {
          &quot;inputs&quot;: [],
          &quot;name&quot;: &quot;getDeployedCampaigns&quot;,
          &quot;outputs&quot;: [
            {
              &quot;internalType&quot;: &quot;address[]&quot;,
              &quot;name&quot;: &quot;&quot;,
              &quot;type&quot;: &quot;address[]&quot;
            }
          ],
          &quot;stateMutability&quot;: &quot;view&quot;,
          &quot;type&quot;: &quot;function&quot;
        }
      ]
  </code></pre>
  <p>The console log confirms that <code>path.resolve()</code> is actually working, but when I go to the page via the web browser I see the following error:</p>
  <p><a href="https://i.stack.imgur.com/m0xio.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m0xio.png" alt="enter image description here" /></a></p>
  <pre><code>Call Stack
  Module../ethereum/factory.js
  file:///Users/sonnyparlin/Github/kickstart/.next/static/chunks/pages/index.js (1148:1)
  Module.options.factory
  /_next/static/chunks/webpack.js (638:31)
  __webpack_require__
  file:///Users/sonnyparlin/Github/kickstart/.next/static/chunks/webpack.js (37:33)
  fn
  /_next/static/chunks/webpack.js (307:21)
  eval
  webpack-internal:///./pages/index.js (9:75)
  Module../pages/index.js
  file:///Users/sonnyparlin/Github/kickstart/.next/static/chunks/pages/index.js (1192:1)
  Module.options.factory
  /_next/static/chunks/webpack.js (638:31)
  __webpack_require__
  file:///Users/sonnyparlin/Github/kickstart/.next/static/chunks/webpack.js (37:33)
  fn
  /_next/static/chunks/webpack.js (307:21)
  eval
  node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F&amp;absolutePagePath=%2FUsers%2Fsonnyparlin%2FGithub%2Fkickstart%2Fpages%2Findex.js! (5:15)
  eval
  node_modules/next/dist/client/route-loader.js (236:50)
  </code></pre>
  <p>My guess is that this is really some kind of versioning or dependency issue, so I'm also including my package.json file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;kickstart&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;mocha&quot;,
      &quot;dev&quot;: &quot;node server.js&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;@truffle/hdwallet-provider&quot;: &quot;^1.0.37&quot;,
      &quot;fs-extra&quot;: &quot;^10.0.0&quot;,
      &quot;ganache-cli&quot;: &quot;^6.1.8&quot;,
      &quot;mocha&quot;: &quot;^9.1.3&quot;,
      &quot;next&quot;: &quot;^12.0.3&quot;,
      &quot;next-routes&quot;: &quot;^1.4.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;semantic-ui-css&quot;: &quot;^2.4.1&quot;,
      &quot;semantic-ui-react&quot;: &quot;^2.0.4&quot;,
      &quot;solc&quot;: &quot;^0.8.9&quot;,
      &quot;web3&quot;: &quot;^1.6.0&quot;
    },
    &quot;browser&quot;: {
      &quot;fs&quot;: false,
      &quot;path&quot;: false,
      &quot;os&quot;: false
    }
  }
  </code></pre>
  <p>And a listing of my project files:</p>
  <p><a href="https://i.stack.imgur.com/lS2Xy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lS2Xy.png" alt="enter image description here" /></a></p>