I recently tried creating an npm module using Webpack and TypeScript. However, after building my package and attempting to import it, I encountered a problem where I received an empty object instead of the default exported function.
Here is a glimpse of my configuration :
Webpack.js :
const webpack = require('webpack');
const path = require('path');
const config = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.ts(x)?$/,
use: ['awesome-typescript-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
}
};
module.exports = config;
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"allowJs": true
},
"include": ["./src/**/*"]
}
The module builds successfully, but when attempting to use the default import, it returns an empty object. I even tested with a simple example function:
const test = () => console.log('test');
export default test;
import test from 'my-module-name'; test() // test is not a functionHas anyone else faced similar issues while creating an npm module using webpack and typescript?
Appreciate any insights from the community!