导入的react node_module中的Typescript编译错误,即使它在tsconfig.json中被排除

时间:2017-08-10 02:23:40

标签: reactjs typescript webpack ts-loader

我一直在尝试看看我是否无法获取我的typescript构建来忽略node_modules(特别是React)。我的tsconfig.json告诉它忽略该文件夹,但它仍在编译中,我不知道为什么。我怀疑也许是因为它是由包含文件中的文件导入的,也许是?

这是一个错误的例子,其中有很多:

ERROR in /Users/rw3iss/Sites/site/src/project/public/node_modules/@types/react/index.d.ts
(3606,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feTile' must be of type 'SVGProps<SVGFETileElement>', but here has type 'SVGProps<SVGFETileElement>'.

我的tsconfig.json看起来像这样:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "outDir": "build",
    "noResolve": false,
    "moduleResolution": "node",
    "typeRoots": [
      "./node_modules/@types",
      "./secure/node_modules/@types",
      "./public/node_modules/@types"
    ],
    "types": [ "react" ]
  },
  "filesGlob": [
  ],
  "include": [
    "secure/src/**/*",
    "public/react_src/**/*"
  ],
  "exclude": [
    "node_modules/**/*",
    "public/node_modules/**/*",
    "secure/node_modules/**/*",
    "public/dist"
  ],
  "types": [ "react" ]
}

我正在尝试使用webpack / ts-loader编译它,我的webpack配置是:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {

    entry: {
        app: [
            APP_DIR + '/react_src/Secure.tsx',
            APP_DIR + '/react_src/DicomViewer.tsx'
        ]
    },

    output: {
        publicPath: '/',
        path: BUILD_DIR, // 'dist'
        filename: '[name].js', // 'index.js'
        //libraryTarget: 'umd'
    },

    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        modules: [ 'node_modules', 'src' ]
    },

    module: {
        rules: [
            { 
                test: /\.(t|j)sx?$/, 
                include: APP_DIR,
                exclude: [
                        path.resolve(__dirname, 'node_modules'),
                        '../public/node_modules',
                        '../node_modules'
                    ],
                loader: ['ts-loader']
            }
        ]
    }
};

module.exports = config;

有谁可以告诉我为什么会发生这些错误,以及可能如何避免它们以及导入的node_modules中可能出现的其他错误?

更新 我删除了'typeRoots'下的所有内容,并将'types'设置为[]:

"typeRoots": [],
"types": []

但它仍然犯同样的错误。我只是想了解为什么......

1 个答案:

答案 0 :(得分:0)

  

我无法获取我的typescript构建以忽略node_modules(特别是React)。我的tsconfig.json告诉它忽略该文件夹,但它仍在编译中,我不知道为什么。

该错误与@types目录中的react类型声明有关。即使我们排除node_modules,编译也会包含@types目录。

以下是一些relevant information from the docs

  

默认情况下,所有可见的“@types”包都包含在您的编译中...如果指定了typesRoots,则只包含typeRoots下的包...如果指定了类型,则只包含列出的包。

您的tsconfig包含一个types属性,指定[ "react" ]。将types属性更改为空数组[]可能会解决该错误。请注意,types属于compilerOptions,不属于顶层。

另见https://github.com/Microsoft/TypeScript/issues/11257