时间戳

首页 > 解决方案 > 由于实施限制，带有 typescript 的 CRA 2.0 覆盖了我的 tsconfig.json

reactjs - 由于实施限制，带有 typescript 的 CRA 2.0 覆盖了我的 tsconfig.json

问题描述

我正在尝试在全新的 CRA 2.0（特别是 2.1.2）中设置 tailwindcss 并使用 typescript。

我无法覆盖 "isolatedModules": true 标志而没有 CRA 覆盖它。

我试图通过更改 modules.export 的导出样式并强制配置为 false 而不是删除它来解决这个问题。我读到您还可以创建一个单独的 tsconfig.json，扩展您的旧文件并覆盖那里的更改，但这似乎很老套。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "isolatedModules": true
  },
  "include": [
    "src",
    "postcss.config.js"
  ]
}

postcss.config.json

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [tailwindcss('./tailwind.config.js'), require('autoprefixer')]
};

这就是我的 npm start 吐出的内容

The following changes are being made to your tsconfig.json file:
  - compilerOptions.isolatedModules must be true (implementation limitation)

我可以看到我的应用程序编译、工作，然后在页面被一个红色错误框替换之前绘制到页面上，上面写着

Type error: Cannot compile namespaces when the '--isolatedModules' flag is 
provided.  TS1208

  > 1 | const tailwindcss = require('tailwindcss');
      | ^
    2 | module.exports = {
    3 |   plugins: [tailwindcss('./tailwind.config.js'), 
require('autoprefixer')]
    4 | };

如何在不弹出或扩展我的 tsconfig.json 并在整个应用程序中使用修改后的版本的情况下覆盖它。

更新：我能够通过弹出我的应用程序并直接进入 webpack-config 以删除 isolatedModules 标志来解决此问题，而不是我想要的方式，但它确实有效。

标签： reactjstypescriptcreate-react-apptailwind-css

解决方案

我得到了同样的东西并添加了一个

// @ts-ignore

在带有 require 并修复它的违规语句之前。

弹出是一个非常激烈的解决方案。不建议。

推荐阅读