title: How to fix "Module not found: Error: Can't resolve '../../clientAndAPi/follow' "
body: <p>I am trying to push my java app to heroku using <code>git push heroku master</code>. When it got to creating a bundle.js file from my <code>webpack.config.js</code>, I got this error --> </p>
  
  <blockquote>
    <p>"Module not found: Error: Can't resolve '../../clientAndAPi/follow' in '/tmp/build_3ee67cfe22a500174d8ca2c8820a8a21/sneakysneaksGUI/src/components/Landing'"  </p>
  </blockquote>
  
  <p>The output should be a compiled <code>bundle.js</code> without errors
  I am trying to push my java app to heroku using git push heroku master. When it got to creating a bundle.js file from my webpack.config.js, I got this error --> </p>
  
  <blockquote>
    <p>"Module not found: Error: Can't resolve '../../clientAndAPi/follow' in '/tmp/build_3ee67cfe22a500174d8ca2c8820a8a21/sneakysneaksGUI/src/components/Landing'"</p>
  </blockquote>
  
  <p>I tried changing the way I imported the files (<code>import follow from --&gt; const follow = require..</code>) This led to the same error. 
  I also tried changing from module.exports in the follow.js file to export default</p>
  
  <pre><code>//imports in Landing.jsx
  
  const follow = require('../../clientAndAPi/follow');
  //import follow from '../../clientAndAPi/follow'; // function to hop multiple links by "rel"
  </code></pre>
  
  <pre><code>//both ways produce problem
  //follow.js
  module.exports = function follow(api, rootPath, relArray) {
      const root = api({
          method: 'GET',
          path: rootPath
      });
  
      return relArray.reduce(function(root, arrayItem) {
          const rel = typeof arrayItem === 'string' ? arrayItem : arrayItem.rel;
          return traverseNext(root, rel, arrayItem);
      }, root);
  
      function traverseNext (root, rel, arrayItem) {
          return root.then(function (response) {
              if (hasEmbeddedRel(response.entity, rel)) {
                  return response.entity._embedded[rel];
              }
  
              if(!response.entity._links) {
                  return [];
              }
  
              if (typeof arrayItem === 'string') {
                  return api({
                      method: 'GET',
                      path: response.entity._links[rel].href
                  });
              } else {
                  return api({
                      method: 'GET',
                      path: response.entity._links[rel].href,
                      params: arrayItem.params
                  });
              }
          });
      }
  
      function hasEmbeddedRel (entity, rel) {
          return entity._embedded &amp;&amp; entity._embedded.hasOwnProperty(rel);
      }
  };
  </code></pre>
  
  <pre><code>//webpack.config.js
  var path = require('path');
  
  module.exports = {
    //TODO -- Change to the real location of app.js 
    entry: './sneakysneaksGUI/src/index.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
      path: __dirname,
      filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
      rules: [
        {
          test: path.join(__dirname, '.'),
          exclude: /(node_modules)/,
          use: [{
            loader: 'babel-loader',
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
            }
          }]
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    }
  };
  </code></pre>
  
  <p>This currently gives an error.
  The output should be a compiled bundle.js without errors</p>