导入的 apiService 在打字稿中未定义

Question

我们正在使用 typescript 并导出一个 class 如下（如果这涉及到 webpack 问题，我们正在使用 nuxt 和 class 样式组件）。

export class ApiService {
  static apiHost = '/';
}

当我们尝试按如下方式导入它时，它给出 ApiService 作为 undefined，因此在 apiHost 访问时出错，因为 ApiService 得到 undefined .

import { ApiService } from '../services/api-service';

我的tsconfig如下。

{
  "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"
  ]
}

我的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: '/',
  },
};

命令我是运行 ts-node -r tsconfig-paths/register server/main.ts

Answer 1

实际上我没有 post 整个代码，因为我认为没有必要。

但是服务也在回调导入服务的class。

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.
  );
}

以下是发生循环依赖的代码。

import ApiService from '../services/api-service';
export class AuthConfig {
   `${ApiService.apiHost}api/callback` // This was again calling back the apiService resulting in cyclic dependency.
}

导入的 apiService 在打字稿中未定义

imported apiService undefined in typescript

javascript

typescript

webpack

nuxt.js

webpack-4