title: How to make namespaces and external modules live together in typescript old projects
body: <p>Hy everyone,</p>
  <p>I'm struggling trying to find a way to solve the following problem:</p>
  <ol>
  <li>I have a web application composed by some plain js obtained from old typescript projects</li>
  <li>The old typescript projects uses namespaces and transpiles to plain javascript.</li>
  <li>I need to extend an old library, coming from one of the projects, with a new part that uses import/export in order to consume some external libraries.</li>
  <li>I need also to compile the new part (that extend the old one) in a way that I can use in projects written in old style.</li>
  </ol>
  <p>I have tried by creating a new project where</p>
  <ul>
  <li><p>I have a file &quot;a.ts&quot; where I'm doing all the imports that I need and export a class</p>
  <pre><code> /// &lt;reference path=&quot;../MyOldLib.d.ts&quot; /&gt;
   import * as AAA from 'ExternalComponentINeed';
   export class XXX extends I.J.K.W{
     constructor() {
       super();
       ...
     }
     ...
   }
  </code></pre>
  </li>
  </ul>
  <p>where I.J.K is the namespace as in the old library and W is a base class that i need to extend</p>
  <ul>
  <li><p>I have file &quot;b.ts&quot; that import the &quot;a.ts&quot; as:</p>
  <pre><code> import * as A_ from &quot;./A&quot;;
   declare global {
     namespace I.J.K {
       export import A = A_;
     }
   }
  </code></pre>
  </li>
  <li><p>In the end I have the last file c.ts that declares the namespace</p>
  <pre><code> namespace I.J.K {
     // Force `I.J.K` to be created at runtime.
     (() =&gt; {})();
   }
  </code></pre>
  </li>
  </ul>
  <p>I'using webpack to build all together with this config file:</p>
  <pre><code>    const path = require('path');
      module.exports = {
        entry:  ['./src/c.ts','./src/b.ts'],
        module: {
        rules: [
         {
            test: /\.tsx?$/,
            exclude: [/node_modules/],
            use: 'ts-loader',
         },
        ],
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js'],
      },
      node: {global: true},
      output: {
        library: 'mylibrary',
        libraryTarget: 'umd',
        filename: 'mylibrary.js',
        libraryExport: 'default',
        auxiliaryComment: 'Test Comment',
        path: path.resolve(__dirname, 'dist'),
      },
     };
  </code></pre>
  <p>Doing this way I can manage to generate a d.ts file that I can use in the old project, everything compile but in the browser does not work and emits the following:</p>
  <pre><code>    Uncaught TypeError: Cannot read properties of undefined (reading 'A')
  </code></pre>
  <p>and here is the point where the code breaks:</p>
  <pre><code>    class c extends I.J.K.W  --&gt; I is not defined
  </code></pre>
  <p>We know that it isn't a good way to go but we need a patch.
  We are planning to refactor our libraries but we can't stop developing and also we would like to have a way to refactor the libraries a little at a time</p>
  <p>Any help would be greatly appreciated.
  Thanks</p>