[英]Webpack unable to handle .tsx files
我正在使用TypeScript创建一个新的react项目(一个非常基本的项目)。 我正在使用webpack将我的打字稿文件捆绑到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
因此,我尝试了几件事,最后尝试从头开始做所有事情,并使其正常运行。 以下是我使用的配置。
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>;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.