javascript - Webpack 无法处理 .tsx 文件

Question

我正在使用 TypeScript 创建一个新的 React 项目(一个非常基本的项目)。我正在使用 webpack 将 typescript 文件捆绑到 javascript 文件。但是在运行 webpack 时出现以下错误:

ERROR in ./src/components/parent/home.tsx
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type.
|
| render(
|   <Home />,
|   rootEl
| );

以下是我正在使用的配置:

tsconfig.json -- 我正在使用 TypeScript 2.6.1

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "baseUrl": "./src/",
    "typeRoots": [
      "node_modules/@types"
    ],
    "allowSyntheticDefaultImports": true
  },
  "exclude" : [
    "node_modules"
  ],
  "include" : [
    "./src/"
  ]
}

webpack.config.js -- 我正在使用webpack 3.8.1

const path = require('path');

module.exports = {
  entry: "./src/components/parent/home.tsx", 

  output: {
    path: path.resolve(__dirname, "dist/app"), 
    filename: "home.js"
  },

  module: {

    rules: [
      { 
        test: /\.(ts|tsx)$/, 
        include: path.join(__dirname, "src"), 
        use: ["babel-loader", "awesome-typescript-loader"] 
      }
    ]
  },

  resolve: {

    modules: [
      "node_modules",
      path.resolve(__dirname, "src")
    ],

    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]

  },

  node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
  },

  devtool: "source-map"
}

home.tsx

import * as React from 'react';
import { render } from 'react-dom';

import Home from '../children/homeContent';

const rootEl = document.getElementById('app');

render(
  <Home />, 
  rootEl
);

homeContent.tsx

import React from 'react';

export default class homeContent extends React.Component<any, any> {

    public render() {
        return (
            <div>
                Hello I am home Page!!
            </div>
        );
    }
}

.babelrc

{
    "presets": ["env", "react"]
}

我做错了什么？

更新:

我在 <Home /> 上的 home.tsx 中收到以下错误线也是如此。

[ts]
Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
  Types of property 'type' are incompatible.
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
      Type 'ComponentClass<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
        Type 'React.ComponentClass<any>' is not assignable to type 'React.ComponentClass<any>'. Two different types with this name exist, but they are unrelated.
          Type 'React.Component<any, React.ComponentState>' is not assignable to type 'React.Component<any, React.ComponentState>'. Two different types with this name exist, but they are unrelated.
            Types of property 'render' are incompatible.
              Type '() => string | number | false | Element | ReactPortal | Element[] | null' is not assignable to type '() => false | Element | null'.
                Type 'string | number | false | Element | ReactPortal | Element[] | null' is not assignable to type 'false | Element | null'.
                  Type 'string' is not assignable to type 'false | Element | null'.
import Home

Answer 1

所以我尝试了一些事情，最后尝试从头开始做所有事情并使其正常工作。以下是我使用的配置。

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

webpack.config.js

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "home.js",
        path: __dirname + "/dist/app/"
    },

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    watch: true
};

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello />,
    document.getElementById("example")
);

Hello.tsx

import * as React from "react";

export class Hello extends React.Component {
    render() {
        return <h1>Hello this is home page!</h1>;
    }
}