title: vercel deployment unable to require `.d.ts` file
body: <p>My next.js app works on my machine but when deployed on Vercel, it fails while building with the following error:</p>
  <pre><code>Error! Unable to require `.d.ts` file.
  This is usually the result of a faulty configuration or import. Make sure there is a `.js`, `.json` or another executable extension and loader (attached before `ts-node`) available alongside `emotion.d.ts`.
  </code></pre>
  <p>It seemed it could not detect emotion.d.ts in my types folder. It is located in src like /src/types/emotion.d.ts, so I tried to change my settings to include that as follows.</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;strict&quot;: false,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;
    },
    &quot;include&quot;: [
      &quot;next-env.d.ts&quot;,
      &quot;src/**/*&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>
  <p>Still, no luck.</p>
  <p>My emotion.d.ts file simply declares a type like this.</p>
  <pre><code>import '@emotion/react';
  
  declare module '@emotion/react' {
    export interface Theme {
      color: {
        primary0: string;
        primary1: string;
        primary2: string;
        primary3: string;
        primary4: string;
        primary5: string;
        primary6: string;
        primary7: string;
        secondary0: string;
        secondary1: string;
        secondary2: string;
        secondary3: string;
        secondary4: string;
        secondary5: string;
        secondary6: string;
        tertiary0: string;
        tertiary1: string;
        tertiary2: string;
        text0: string;
        text1: string;
        text2: string;
        text3: string;
        text4: string;
        bg0: string;
        bg1: string;
        bg2: string;
      };
      size: {
        maxWidth: string;
      };
      mediaQuery: {
        sp: string;
        pc: string;
      };
    }
  }
  </code></pre>
  <p>Any help would be hugely appreciated. Thank you!</p>