Hy everyone,
I'm struggling trying to find a way to solve the following problem:
I have tried by creating a new project where
I have a file "a.ts" where I'm doing all the imports that I need and export a class
/// <reference path="../MyOldLib.d.ts" />
import * as AAA from 'ExternalComponentINeed';
export class XXX extends I.J.K.W{
constructor() {
super();
...
}
...
}
where I.J.K is the namespace as in the old library and W is a base class that i need to extend
I have file "b.ts" that import the "a.ts" as:
import * as A_ from "./A";
declare global {
namespace I.J.K {
export import A = A_;
}
}
In the end I have the last file c.ts that declares the namespace
namespace I.J.K {
// Force `I.J.K` to be created at runtime.
(() => {})();
}
I'using webpack to build all together with this config file:
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'),
},
};
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:
Uncaught TypeError: Cannot read properties of undefined (reading 'A')
and here is the point where the code breaks:
class c extends I.J.K.W --> I is not defined
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
Any help would be greatly appreciated. Thanks