Typescript + webpack outputs empty object

I'm trying to export a umd module w. webpack, and consume it via <script> tag. my tsconfig.json is configured to export a commonjs file

{
    "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true
 }
}

And my webpack config is set to output a umd lib,

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
      test: './src/index.tsx'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'test.js',
    path: path.resolve(__dirname, 'dist'),
    library: "test",
    libraryTarget: "umd",
  },
  plugins: [new HtmlWebpackPlugin({
      title: "test",
      minify: false,
      
  })],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true
  }
};

and my src/index.ts file

export function sayHi() {
  console.log('Hello')
}

when running webpack serve I see that my file was compiled and imported correctly to my HTML, but he trying to access test inside the js (chrome console) my lib is resolved to an empty object

{}

I'm expecting test.sayHi() to log the message, instead I get an error sayHi() is not a function

What am I missing? tried converting the TS module to umd others but none seem to work...

Typescript + webpack outputs empty object

0 Answers