reactjs - Webpack5 ts-loader 无法编译反应文件
问题描述
文件夹结构:
在图片中,编译器说存在 App 引用值 balabala 的问题。当我运行时npm run serve
,它也失败了,无法成功编译。如何解决?
webpack.config:
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/index.ts',
output: {
filename: 'js/build.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: true,
},
resolve: {
alias: {
"@": path.resolve(__dirname, 'src'),
},
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'My Test Webpack',
template: './public/index.html'
})
]
}
tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"target": "es6",
"jsx": "react",
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"declaration": true,
"noImplicitAny": false,
"noImplicitReturns": false,
"noUnusedLocals": false,
"removeComments": true,
"strictNullChecks": false,
"outDir": "./dist/",
"preserveConstEnums": true,
"noLib": false,
"rootDirs": ["src", "test"],
"lib": ["es6", "dom"]
},
"include": ["src/**/*"],
"exclude": ["dist", "node_modules", "static"]
}
包.json
{
"name": "webpack5test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@babel/plugin-transform-runtime": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"browserslist": "^4.17.5",
"core-js": "^3.19.1",
"file-loader": "^6.2.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"postcss": "^8.3.11",
"postcss-loader": "^6.2.0",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"regenerator-runtime": "^0.13.9",
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"url-loader": "^4.1.1",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1"
},
"scripts": {
"serve": "webpack serve",
"build": "webpack --mode=development",
"build:watch": "webpack --mode=development --watch"
},
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/plugin-transform-arrow-functions": "^7.16.0",
"@babel/plugin-transform-block-scoping": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@types/react": "^17.0.34",
"@types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.5.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack-dev-server": "^4.4.0"
}
}
解决方案
您正在尝试jsx/tsx
在常规打字稿ts
文件中使用语法。重命名index.ts
为index.tsx
,然后将entry
Webpack 配置中的修改为'./src/index.tsx'
.
或者,如果您想继续使用文件的.ts
扩展名index.ts
,则手动创建 vDOM 元素:
import * as React from 'react';
ReactDOM.render(
React.createElement(App),
document.getElementById('app'));
推荐阅读
- javascript - 如何根据对象数组中的时间排序?
- scala - Scala 的 List 解包
- java - java.lang.ClassNotFoundException:org.springframework.core.Conventions
- android - 在前台定期扫描信标并获取位置
- c - 是否可以创建线程私有变量?
- reactjs - 消息必须是静态可评估的,以便在课堂上提取
- ios - 在 swift4 中的 facebook 集成中获取用户详细信息
- python - 使用输入文件中的信息根据条件生成列表的优雅方法
- sql-server - Powershell 连接字符串中的 MSSQl 'GO' 处理
- c++ - 从 C++/WinRT 应用程序中的代码地址获取符号名称