Webpack + tsconfig + динамическая ошибка выкидывания импорта NoEmit для файлов .d.ts

Question

У меня странная проблема с пониманием того, как файлы webpack, tsconfig и .d.ts работают вместе.

У меня следующая структура проекта:

ScriptsApp содержит папку @types следующим образом:

Мой tsconfig.json выглядит следующим образом:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "esnext",
    "lib": [
      "es6",
      "dom",
      "scripthost",
      "es2018",
      "es2018.promise"
    ],
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./.out/",
    "noImplicitAny": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types", "ScriptsApp/@types"]
  },
  "include": ["./ScriptsApp/**/*.tsx", "./ScriptsApp/**/*.ts", "ScriptsApp/@types"],
  "exclude": ["node_modules"],
  "files": ["ScriptsApp/indexApp.tsx"]
}

А это мой конфиг веб-пакета:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
  mode: "development",
  output: {
    filename: "[name].bundle.[hash].js",
    path: path.join(__dirname, ".out/"),
    chunkFilename: "[name].chunk.js",
    publicPath: "/",
    hotUpdateChunkFilename: ".hot/hot-update.js",
    hotUpdateMainFilename: ".hot/hot-update.json"
  },
  optimization: {
    runtimeChunk: {
      name: "manifest"
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -20,
          chunks: "all"
        }
      }
    }
  },
  target: "web",
  devServer: {
    contentBase: ".out/",
    hot: true
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: path.join(__dirname, "./index.html")
    }),

    new ForkTsCheckerWebpackPlugin({
      checkSyntacticErrors: true,
      tslint: "./tslint.json",
      tslintAutoFix: true,
      tsconfig: "./tsconfig.json",
      async: false,
      reportFiles: ["ScriptsApp/**/*"]
    })
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpg|ico)$/,
        loader: "file-loader",
        options: {
          name: ".img/[name].[ext]?[hash]",
          publicPath: "/"
        }
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader",
        options: {
          name: ".fonts/[name].[ext]?[hash]",
          publicPath: "/"
        }
      },
      {
        test: /\.(ts|tsx)$/,
        use:"ts-loader"
      },
      {
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".scss", ".css", ".png", ".ico", ".json"]
  },
  devtool: "source-map"
};

Теперь мой вопрос: я пытаюсь использовать динамический импорт в одном из моих компонентов React следующим образом:

private loadComponentFromPath(path: string) {
    import(`../../ScriptsApp/${path}`).then(component =>
      this.setState({
        component: component.default
      })
    );
}

Как только я добавил динамический импорт, моя сборка начала показывать эту ошибку для всех файлов .d.ts в папке ScriptsApp / @ types

WARNING in ./ScriptsApp/@types/react-adal.d.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\ScriptsApp\@types\react-adal.d.ts.
    at makeSourceMapAndFinish (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:78:15)
    at successLoader (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:68:9)
    at Object.loader (C:\code\AzureCXP-Eng\src\Applications\AzureCxpWebSite\WebSite\FeedbackSrc\App\node_modules\ts-loader\dist\index.js:22:12)
 @ ./ScriptsApp lazy ^\.\/.*$ namespace object ./@types/react-adal.d.ts
 @ ./ScriptsApp/Routes/AppRoutesList.tsx
 @ ./ScriptsApp/Routes/Routes.tsx
 @ ./ScriptsApp/Components/App.tsx
 @ ./ScriptsApp/indexApp.tsx
 @ ./ScriptsApp/index.tsx
 @ multi webpack-hot-middleware/client?reload=true ./ScriptsApp/index.tsx

Как я могув настоящее время ошибка исчезает?

1. Переместить папку @types за пределы ScriptsApp или
2. Не использовать динамический импорт
3. Переименовать все файлы .d.ts в ScriptsApp/ @ печатает на .interface.ts -> меня больше всего сбивает с толку

Хотя я не могу понять, почему.Я также новичок во всем технологическом стеке, так что извините, если я упускаю что-то очевидное.Пожалуйста, объясните это поведение.Кроме того, любые предложения по улучшению конфигурации также приветствуются.Благодарю.

Answer 1

Из другой проблемы GitHub вы можете сделать это в вашем файле tsconfig.json.

{ "compilerOptions": { "target": "ES6", "jsx": "react", "noEmit": true }, "exclude": [ "node_modules", "dev_server.js" ] }

Не могли бы вы попытаться добавить строку "noEmit": false.