In a TypeScript project, I am trying to import a TypeScript library named "fsaa-util" that I bundled with WebPack. The code compiles fines but at runtime when trying to use an object from that library they're undefined.
index.ts:
import { MyClass } from "fsaa-util";
let t = new MyClass(); //Throws MyClass is not a constructor.
console.log(t);
index.ts of the library:
import "reflect-metadata";
export { default as MyClass } from "MyClass";
MyClass.ts:
export default class MyClass {
}
tsconfig.json of the library:
{
"compilerOptions": {
"noImplicitAny": true,
"module": "es6",
"target": "es6",
"jsx": "react",
"jsxFactory": "h",
"strict": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"declaration": true,
"declarationDir": "./dist",
"baseUrl": "./src",
"outDir": "./dist",
"plugins": [
{ "transform": "typescript-transform-paths" },
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
Webpack.config.js of the library:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'index.js',
publicPath: '/dist/',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
allowTsInNodeModules: true,
appendTsSuffixTo: [/\.vue$/],
compiler: 'ttypescript'
}
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.wasm', '.mjs', '.js', '.json', 'css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
modules: ["src", "node_modules"]
},
plugins: [
new VueLoaderPlugin(),
]
};
Had to add these lines in "output" section of
webpack.config.js
of the library: