create-react-app 中 d.ts 文件的模块解析失败答案

【问题标题】：Module parse failed for d.ts files in create-react-appcreate-react-app 中 d.ts 文件的模块解析失败
【发布时间】：2022-01-26 19:51:08
【问题描述】：

我正在开发一个导入到通过 create-react-app 创建的 React 应用程序的库。不幸的是，我收到很多警告说我的 d.ts 文件（来自该库）无法解析。

./node_modules/my-library/json-schema/json-schema-model.d.ts 1:7
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export declare class JsonSchema {
|     schema: string | null;
|     id: string | null;

由于复杂性，我不知道代码的哪些部分可能对您有用。我正在使用react-scripts@4.0.3。我还没有弹出应用程序，所以大多数配置文件都没有改动，隐藏在 react-scripts 中。

【问题讨论】：

你能分享你的 webpack.config.js 吗？
我没有。该应用程序由 create-react-app 引导，因此我无权访问它。
您好，只是报告一些进展。我想我在这个问题上找到了your repository。我认为问题是由于手动链接而产生的。另外，由于某种原因，我目前无法构建开发分支？大师工作。
嗨，这是存储库。谢谢你。我已经检查过，开发分支应该没问题。但是，问题也出在 master 分支中。关于链接，我正在从文件系统执行 npm install 。如果我没记错的话，应该和从 npm 注册表安装一样。

标签： typescript webpack create-react-app

【解决方案1】：

所以，这个错误是由于 webpack 对你的自定义库使用什么样的加载器感到困惑。你需要告诉它使用什么样的装载机。我决定最好的方法是使用 react-app-rewired 包来做到这一点。这个包允许您在开始编译所有内容之前对 webpack 配置进行最后的 tweeks 配置。

在开始本教程之前，您应该已经链接了模型驱动数据并安装了依赖项。

所以你需要做的第一件事是使用这个命令在你的项目中安装 react-app-rewired：npm i -D react-app-rewired

您需要做的下一件事是在“脚本”命令中将“react-scripts”替换为“react-app-rewired”。这将允许我们在执行之前注入自定义 webpack 配置更改。

您的 package.json 现在应该如下所示：

您现在可以在根文件夹（与 package.json 相同的文件夹）中创建 config-overrides.js。

config-overrides.js 中应该是这样的代码：

const path = require("path");
const fs = require("fs");

// Helper functions for folder join
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

// I don't know what this does, but it's stole from original webconfig here: https://raw.githubusercontent.com/facebook/create-react-app/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/paths.js  (raw link, cuz until somebody goes crazy with rebase, it will be valid)
const hasJsxRuntime = (() => {
  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
    return false;
  }

  try {
    require.resolve("react/jsx-runtime");
    return true;
  } catch (e) {
    return false;
  }
})();

// Inject changes to webpack
module.exports = function override(config, env) {
  config.module.rules[1].oneOf.push({
    test: /\.(js|mjs|jsx|ts|tsx)$/, // Regex for matching file endings
    include: resolveApp("node_modules/model-driven-data"), // Joined path to your custom library
    loader: require.resolve("babel-loader"), // Defautl resolver for js(x)/ts(x) files
    options: {
      customize: require.resolve("babel-preset-react-app/webpack-overrides"),
      presets: [
        [
          require.resolve("babel-preset-react-app"),
          {
            runtime: hasJsxRuntime ? "automatic" : "classic",
          },
        ],
      ],
    },
  });
  // Return newly edited config and execute it
  return config;
};

您现在可以正常运行 npm run build 并且它应该可以按预期工作。如果您有任何问题，请不要犹豫写评论：D

【讨论】：