title: ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'
body: <p>I have stumbled upon when deploying my next.js app through vercel. It works completely well in local using command 'npm run dev'. But when I tried to deploy it through vercel with Github remote repository, it throws error like below:</p>
  <pre><code>    16:13:16.712    Attention: Next.js now collects completely anonymous telemetry regarding usage.
      16:13:16.712    This information is used to shape Next.js' roadmap and prioritize features.
      16:13:16.712    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
      16:13:16.712    https://nextjs.org/telemetry
      16:13:20.255    Failed to compile.
      16:13:20.256    ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'
      16:13:20.257    &gt; Build error occurred
      16:13:20.257    Error: &gt; Build failed because of webpack errors
      16:13:20.257        at /vercel/path0/node_modules/next/dist/build/index.js:15:918
      16:13:20.257        at runMicrotasks (&lt;anonymous&gt;)
      16:13:20.258        at processTicksAndRejections (internal/process/task_queues.js:93:5)
      16:13:20.258        at async /vercel/path0/node_modules/next/dist/build/tracer.js:3:470
      16:13:20.269    npm ERR! code ELIFECYCLE
      16:13:20.269    npm ERR! errno 1
      16:13:20.272    npm ERR! myportfolio@0.1.0 build: `next build`
      16:13:20.272    npm ERR! Exit status 1
      16:13:20.272    npm ERR! 
      16:13:20.272    npm ERR! Failed at the myportfolio@0.1.0 build script.
      16:13:20.272    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
      16:13:20.280    npm ERR! A complete log of this run can be found in:
      16:13:20.280    npm ERR!     /vercel/.npm/_logs/2021-04-04T15_13_20_272Z-debug.log
  </code></pre>
  <p>Here is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;myportfolio&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;3d-react-carousal&quot;: &quot;^3.1.0&quot;,
      &quot;airtable&quot;: &quot;^0.10.1&quot;,
      &quot;framer-motion&quot;: &quot;^4.0.0&quot;,
      &quot;next&quot;: &quot;10.0.7&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;,
      &quot;react-gtm-module&quot;: &quot;^2.0.11&quot;,
      &quot;react-intersection-observer&quot;: &quot;^8.31.0&quot;,
      &quot;react-lottie&quot;: &quot;^1.2.3&quot;,
      &quot;react-scroll&quot;: &quot;^1.8.1&quot;,
      &quot;react-toast-notifications&quot;: &quot;^2.4.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;file-loader&quot;: &quot;^6.2.0&quot;
    }
  }
  </code></pre>
  <p>Here is my next.config.js</p>
  <pre><code>module.exports 
    ={
      webpack(config, options) {
          config.module.rules.push({
              test: /\.(mp3)$/,
              use: {
                loader: 'file-loader',
                options: {
                  publicPath: '/_next/static/sounds/',
                  outputPath: 'static/sounds/',
                  name: '[name].[ext]',
                  esModule: false,
                },
              },
            });
        return config;
      }
    }
  </code></pre>
  <p>Any ideas why it throws a compile error when deploying on Vercel?</p>