Reactjs 网页包4:模块分析失败：意外令牌

在我的构建过程中，webpack给了我以下错误：

./client/components/App/index.tsx 15:9中出错 模块分析失败：意外令牌（15:9） 您可能需要适当的加载程序来处理此文件类型

我的

App.tsx

：

import React, { SFC } from "react";
import ReactDOM from "react-dom";

const App: SFC = () => (
  <div style={{ background: "red" }}>
    <h3>test</h3>
  </div>
);

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./components";

ReactDOM.render(<App />, document.getElementById("app"));

// enables Hot Module Replacement (HMR)
if ((module as any).hot) {
  (module as any).hot.accept("./components/App", () => {
    // for HMR to work, `App` must be re-required
    const NextApp = require("./components/App").default;
    ReactDOM.render(<NextApp />, document.getElementById("app"));
  });
}

My

tsconfig.json

：

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "module": "commonjs",
    ...
  }
}

错误本身似乎给出了解决方案：

您可能需要一个合适的加载程序来处理此文件类型。

，但是，据我所知，

ts加载程序

应该能够处理react

---

是一个示例

webpack.config

，由

ts loader

团队提供，用于使用typescript和react的应用程序中。该设置与我自己的设置非常相似，但是，我不使用

webpack dev server

，而是使用

webpack dev中间件

通过对原始问题的评论解决了问题。似乎

ts loader

当给定一个要

包含的模块时，将不会遍历链接的模块。删除
include
字段或使用文件夹名称为我修复了此错误。
include将ts加载程序缩小为一个文件。也许这就是问题所在？似乎就是这样。谢谢。我的印象是
ts loader
的工作方式与typescript编译器几乎相同。ts编译器的行为是接收输入文件并跟踪链接到输入文件的所有模块。我想ts loader不会这样做，但考虑到我对loader的理解（有限），这是有道理的。
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./components";

ReactDOM.render(<App />, document.getElementById("app"));

// enables Hot Module Replacement (HMR)
if ((module as any).hot) {
  (module as any).hot.accept("./components/App", () => {
    // for HMR to work, `App` must be re-required
    const NextApp = require("./components/App").default;
    ReactDOM.render(<NextApp />, document.getElementById("app"));
  });
}

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "module": "commonjs",
    ...
  }
}