We are using typescript and exporting one class as following (we are using nuxt and class style component if this relates to webpack issue).
export class ApiService {
static apiHost = '/';
}
When we try to import it as following, it gives ApiService as undefined and so gives error on apiHost access as ApiService gets undefined.
import { ApiService } from '../services/api-service';
my tsconfig is as following.
{
"compilerOptions": {
"module": "commonjs",
"declaration": false,
"removeComments": true,
"noLib": false,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"target": "esnext",
"resolveJsonModule": true,
"sourceMap": true,
"outDir": "./dist",
"esModuleInterop": true,
"moduleResolution": "node",
"baseUrl": "./",
"skipLibCheck": true, // TODO: Remove. Temporary. https://github.com/nuxt/typescript/issues/49
"paths": {
"~/*": ["server/*"],
"@/*": [
"client/*"
],
},
"types": [
"node",
"@types/node",
"@nuxt/vue-app",
"vuex-class-component/dist",
]
},
"include": [
"server/**/*",
"client/**/*"
],
"exclude": [
"node_modules"
]
}
my webpack.config.js
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
entry: ['webpack/hot/poll?1000', './server/main.ts'],
watch: true,
target: 'node',
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?1000'],
}),
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
mode: 'development',
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new WebpackShellPlugin({ onBuildEnd: ['node dist/main.js'] }),
],
output: {
path: `${__dirname}/dist`,
publicPath: '/',
},
};
Command I am running
ts-node -r tsconfig-paths/register server/main.ts
Actually I didn't post entire code as I thought it wasn't necessary.
But service was also calling back the class where service was imported.
import { AuthConfig } from '../config/auth-config';
export class ApiService {
static apiHost = '/';
static mgr = new Oidc.UserManager(
new AuthConfig().IdentityServerOAuth2Config, // This was causing issue as it was causing cyclic imports.
);
}
Follwing is the code where cyclic dependency was happening.
import ApiService from '../services/api-service';
export class AuthConfig {
`${ApiService.apiHost}api/callback` // This was again calling back the apiService resulting in cyclic dependency.
}