title: How to load libraries which export Typescript in next.js
body: <p>When trying to import a component from a private library which exports <em>Typescript</em>, we get the following error message:</p>
  <pre><code>Module parse failed: Unexpected token (82:7)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | 
  | // Types
  &gt; export type {
  </code></pre>
  <p>How could I fix that? I tried to explicitly include the libraries node modules in the <em>tsconfig</em> file:</p>
  <pre><code>  &quot;include&quot;: [
      &quot;next-env.d.ts&quot;,
      &quot;**/*.ts&quot;,
      &quot;**/*.tsx&quot;,
      &quot;node_modules/@private-lib/*.*&quot;
    ],
    &quot;exclude&quot;: [&quot;&quot;]
  </code></pre>
  <p>but unfortunately, to no avail. There seems to be the possibility to change the <em>webpack</em> configuration of <em>next.js</em>, but trying to just shove in a Typescript loader did not work, unfortunately:</p>
  <pre><code>module.exports = {
    webpack: (config, options) =&gt; {
      config.module.rules.push({
        test: /\.(ts|js)x?$/,
        use: [
          options.defaultLoaders.babel,
          {
            loader: &quot;ts-loader&quot;,
            options: {
              transpileOnly: true,
              experimentalWatchApi: true,
              onlyCompileBundledFiles: true,
            },
          },
        ],
      });
  
      return config;
    },
  };
  </code></pre>
  <p>It produces this error:</p>
  <pre><code>./node_modules/process/browser.js
  TypeError: /home/blub/bla/website/node_modules/process/browser.js: Property left of AssignmentExpression expected node to be of a type [&quot;LVal&quot;] but instead got &quot;BooleanLiteral&quot;
  </code></pre>
  <p>So is anybody out there who also faced this problem and could point me into the right direction? There seems to be a lot of magic at work here and I am kind of lost.</p>