React TS2304 error: Cannot find name 'Component'

Question

As title, I am using React in TypeScript to develop. But in compile step, it throws an error as:

Error in /MyMacPath/react_ts_project/node_modules/@types/react-dom/index.d.ts(25, 34):error TS23O4: Cannot find name 'Component'.

then I searched and found two methods, the first is declare var Component: any, which is following by typescript getting error TS2304: cannot find name ' require'. and the other is configuring the compilerOptions and add one option:

"types": ["react-dom"]

Unfortunately, they do not work neither.

The following is my project confiurations files:

webpack.config.js

module.exports = {
    cache: true,
    watch: true,
    entry: {
        index: './scripts/index.tsx'
    },
    output: {
        filename: './public/[name].dev.js'
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader'
            }
        ]
    }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "types": ["react", "react-dom", "jquery", "react-router"]
  },
  "include": [
    "./scripts/"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": true
}

besides, I have installed @types/react @types/react-dom via npm.

Thanks sincerely.

Answer 1

尝试将此添加到您的compilerOptions对象中。它对我有用，刚刚遇到同样的问题。

"typeRoots": [
  "./node_modules/@types"
]