打字稿反应错误

Question

我有以下 webpack.config.js 文件：

module.exports = {
entry: "./Scripts/src/index.tsx",
output: {
    filename: "./wwwroot/Scripts/dist/bundle.js",
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".scss",".css", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" },
      {
  test: /\.s?css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'typings-for-css-modules-loader',
      options: {
        sass: false,
        modules: true,
        camelCase: true,
        importLoaders: 1,
        namedExport: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
      }
    },

  ]
},
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader?&name=fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=images/[name].[ext]' },
    ],


}
}

我有以下 tsconfig.json 文件：

{
"compilerOptions": {
"outDir": "./Scripts/",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"jsx": "react",
"lib": [ "es5", "es6", "dom" ]
},
"exclude": [
"node_modules",
"wwwroot"
]

}

我的 Package.json 看起来像：

{
"name": "react-typescript-vs",
"version": "1.0.0",
"description": "React TypeScript VS 2017",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack"
},
"keywords": [
  "abhilash",
  "react",
  "typescript",
  "vs2017"
],
"author": "Abhilash D K",
"license": "ISC",
"dependencies": {
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-scripts-ts": "2.8.0",
  "typed-css-modules-loader": "0.0.11",
  "typescript": "^2.6.2",
  "webpack": "^3.10.0"
},
"devDependencies": {
  "@types/jest": "^21.1.8",
  "@types/node": "^8.0.54",
  "@types/react": "^16.0.27",
  "@types/react-dom": "^16.0.3",
  "autoprefixer": "7.1.6",
  "case-sensitive-paths-webpack-plugin": "2.1.1",
  "chalk": "1.1.3",
  "css-loader": "0.28.7",
  "dotenv": "4.0.0",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.0.1",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",
  "extract-text-webpack-plugin": "3.0.2",
  "file-loader": "1.1.5",
  "fs-extra": "3.0.1",
  "html-webpack-plugin": "2.29.0",
  "jest": "20.0.4",
  "object-assign": "4.1.1",
  "postcss-flexbugs-fixes": "3.2.0",
  "postcss-loader": "2.0.8",
  "promise": "8.0.1",
  "prop-types": "^15.6.0",
  "radium": "^0.19.6",
  "raf": "3.4.0",
  "react": "^16.1.0",
  "react-dev-utils": "^4.2.1",
  "react-dom": "^16.1.0",
  "sass-loader": "^6.0.6",
  "source-map-loader": "^0.2.3",
  "style-loader": "0.19.0",
  "sw-precache-webpack-plugin": "0.11.4",
  "ts-loader": "^3.2.0",
  "typings-for-css-modules-loader": "^1.7.0",
  "url-loader": "0.6.2",
  "webpack-manifest-plugin": "1.3.2",
  "whatwg-fetch": "2.0.3"
}
}

我有一个 Scripts/src 文件夹。在它下面我有一个带有 Hello.tsx 的组件文件夹，内容如下：

import * as React from "react";
export interface IHelloProps {
    text: string;
}

export class Hello extends React.Component<IHelloProps, {}> {
    render() {
        return(<div>{this.props.text}</div>);
    }
}

在 Scripts/src 文件夹下，我有一个 index.tsx 文件，内容如下：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";

ReactDOM.render(
    <div>
        <Hello text="Hello from React Typescript...." />
    </div>,
    document.getElementById('app')
);

一切正常。现在我将添加带有 .textColor { color: azure } 的 Hello.css 文件作为它的内容，我什至不使用它。当我运行 webpack 并尝试访问 index.html 时，出现以下错误：

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我尝试将模块：commonjs 以及模块：es6 添加到 tsconfig.json。还是一样的错误。

谁能解释一下问题出在哪里，并给我一个解决方案。

提前致谢。

Answer 1

可能与您尝试导入 Hello 的方式有关。

试试：

import * as Hello from './components/Hello';

编辑：

抱歉，我刚刚看到这里出了什么问题。您从 hello 导入的不是 React 组件，它是一个包含所有类的对象。所以在你的情况下，它看起来像：

{
  textColor: "referenceToActualClassName"
}

所以你不会把它用作：

<Hello>

而是作为

<div className={Hello.textColor}></div>

如果解决了问题，请告诉我。

另一个编辑：

不...您可能确实有一个组件。问题是您的组件文件和样式文件都命名为 Hello。

extensions: [".scss",".css", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]

这里的订单很重要。所以你正试图从 css 文件中导入 Hello。明确文件扩展名或将样式文件重命名为styles.css或theme.css之类的。