NXGS 警告“在 '@ngxs/store' 中找不到导出 'StateContext'”答案

【问题标题】：NXGS warning of "export 'StateContext' was not found in '@ngxs/store'"NXGS 警告“在 '@ngxs/store' 中找不到导出 'StateContext'”
【发布时间】：2020-09-20 19:32:42
【问题描述】：

我正在使用 NWRL NX，其中一个库正在使用 NXGS (3.6.2) 作为应用程序的共享状态库。

运行应用程序时，我收到警告 export 'StateContext' was not found in '@ngxs/store 并引用 StateContext 的操作类型，例如下面的示例函数：

@Action(FundListActions.Fetch)
fetch({ setState, getState, dispatch}: StateContext < StateModel > ) {
    const state = getState();
    setState({
        ...state,
        loaded: false,
        loading: true,
        error: null,
    });
}

NXGS 正在按预期运行，但我想知道如何修复此警告消息

【问题讨论】：

尝试删除你的 node_modules 文件夹并运行“npm install”。我会在 node_modules 文件夹中查找 @ngxs/store 并查看是否正在导出 StateContext 接口。
我会马上检查的
当我将 NGXS 与 Angular 和 Storybook 一起使用时，我收到了一堆警告。我记得我自己的导出在其他地方也收到了类似的警告，我设法通过从interface 切换到class（或者abstract class，如果你想更明确的话）来修复这些警告。接口和类在 TypeScript 中是可以互换的，但是接口被从 JavaScript 中剥离（这样的概念在那里不存在），而类仍然存在。因此，如果您使用接口，则会收到警告。适当的修复可能会在 NGXS 库的上游（因为您不控制 StateContext 定义）。
我正在考虑为此创建一个错误报告，但还没有完成。
对此的任何解决方案。我在 StoryBook 中遇到了同样的问题“在 '@ngxs/store' 中找不到导出 'StateContext'”。有一个 SB NgXs 示例，但我没有看到任何特别之处 learnstorybook.com/intro-to-storybook/angular/en/data

标签： ngxs nrwl-nx nrwl

【解决方案1】：

来自https://github.com/TypeStrong/ts-loader/issues/653#issuecomment-390889335，找到了以下为我修复此错误的自制 webpack 插件：

const ModuleDependencyWarning = require("webpack/lib/ModuleDependencyWarning")

module.exports = class IgnoreNotFoundExportPlugin {
  apply(compiler) {
    const messageRegExp = /export '.*'( \(reexported as '.*'\))? was not found in/
    function doneHook(stats) {
      stats.compilation.warnings = stats.compilation.warnings.filter(function(warn) {
        return !(warn instanceof ModuleDependencyWarning && messageRegExp.test(warn.message));
      })
    }
    if (compiler.hooks) {
      compiler.hooks.done.tap("IgnoreNotFoundExportPlugin", doneHook);
    } else {
      compiler.plugin("done", doneHook);
    }
  }
}

还有我的故事书的 webpack.config.js：

const IgnoreNotFoundExportPlugin = require('./ignore_not_found_export_plugin');

module.exports = async({config, mode}) => {
   // ...

   config.plugins = config.plugins || [];
   config.plugins.push(new IgnoreNotFoundExportPlugin());

   return config;
}

【讨论】：