反应流中的Props类型错误，将create-react应用程序转换为webpack [英] Error on type Props in react flow, converting create-react app to webpack
问题描述
我正在尝试将创建反应的应用程序转换为Webpack应用程序.其背后的背景是，我最初有一个使用create-react制作的应用程序.我想使用webpack运行该项目.我使用了一个在webpack上运行的应用程序，然后删除了所有源文件，将其替换为create react应用程序中的源文件.之后，我将package.json依赖项移出了create-react应用程序的package.json.我认为也许我需要在webpack中进行一些额外的配置来处理流程.我需要帮助进行故障排除.我收到此类型的错误:
./src/js/constants/Routes.jsx中的 ERROR模块构建失败(来自./node_modules/babel-loader/lib/index.js):SyntaxError:意外的令牌，预期为;"(7:5)5 |从'../hoc'导入{reduxConnect}；6 |>7 |输入Props = { 这是我的webpack.config.js:
const path = require('path');const config = {条目:__ dirname +'/src/js/index.js'，输出: {路径:__ dirname +'/grails-app/assets/javascripts'，publicPath:'/资产/'，文件名:"bundle.js"}，模块: {规则:[{测试:/\.(js|jsx)$/，使用:"babel-loader"，排除:/node_modules/}，{测试:/\.css $/，用: [样式加载器"，'css-loader']}]}，解决: {扩展名:['.js'，'.jsx']}};module.exports =配置; 这是我的.babelrc
预设":["@ babel/preset-env"，"@ babel/预设反应"]} package.json(我以生产模式运行，因此忽略devDependencies):
{"name":"KahuDealerWeb"，"version":"1.0.0"，"description":"Vehicle Finance 3.0 ====================，"main":"index.js"，目录":{"lib":"lib"，测试一下"}，脚本":{"watch":"webpack --watch --colors --progress"，"bundle":"webpack"}，存储库":{"type":"git"，"url":"git + https://github.com/ProconGPS/KahuDealerWeb.git"}，关键字":[]，作者": ""，许可证":"ISC"，错误":{"url":"https://github.com/ProconGPS/KahuDealerWeb/issues"}，主页":"https://github.com/ProconGPS/KahuDealerWeb#readme"，依赖关系":{"@ babel/core":"^ 7.0.1"，"@ babel/preset-env":"^ 7.0.0"，"@ babel/preset-flow":"^ 7.10.1"，"@ babel/preset-react":"^ 7.0.0"，"@ material-ui/core":"^ 4.10.1"，"@ material-ui/icons":"^ 4.9.1"，"axios":"^ 0.19.0"，"babel-loader":"^ 8.0.2"，"core-js":"^ 3.1.3"，"css-loader":"^ 3.5.3"，"lodash":"^ 4.17.11"，"material-ui-icons":"^ 1.0.0-beta.36"，"node-sass":"^ 4.10.0"，"react":"^ 16.13.1"，"react-cookies":"^ 0.1.0"，"react-dom":"^ 16.13.1"，反应模式":"^ 3.11.1"，"react-redux":"^ 5.0.7"，"react-router-dom":"^ 4.2.2"，"react-select":"^ 2.2.0"，反应到打印":"^ 2.5.1"，图表":"^ 1.8.5"，"redux":"^ 3.7.2"，"redux-observable":"^ 0.18.0"，"rxjs":"^ 5.5.6"，"rxjs-compat":"^ 6.3.3"，"style-loader":"^ 1.2.1"，"webpack":"^ 4.18.1"，"webpack-cli":"^ 3.1.0"，"webpack-dev-server":"^ 3.1.8"}，"devDependencies":{"babel-core":"^ 6.26.3"，"babel-loader":"^ 8.1.0"，"babel-preset-es2015":"^ 6.24.1"，"babel-preset-react":"^ 6.24.1"，"webpack":"^ 4.43.0"，"webpack-cli":"^ 3.3.11"}} Flow语法不是真正的JS.因此，诸如 type Props 之类的内容在转译或捆绑时会崩溃.您需要添加babel插件/预设来处理这些情况.
这就是您要添加的内容: https://babeljs.io/docs/en/babel-preset-flow
但具体来说，用yarn或npm安装 @ babel/preset-flow
然后在您的 .babelrc 中更新您的配置以添加新的预设
{预设":["@ babel/preset-env"，"@ babel/预设反应"，"@ babel/预设流"]} I am trying to convert a create-react app to a webpack app. The context behind this is that I originally have a app that was made using create-react. I wanted to run that project using webpack. I took an app that I had that was running on webpack, and then I delete all its source files, replacing the with the source files from the create react app. After that, I took package.json dependencies and moved them over from the package.json of the create-react app. I think perhaps I need some extra configuration in webpack to handle flow. I need help in troubleshooting. I get this type of error:
ERROR in ./src/js/constants/Routes.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token, expected ";" (7:5)
5 | import { reduxConnect } from '../hoc';
6 |
> 7 | type Props = {
This is my webpack.config.js:
const path = require('path');
const config = {
entry: __dirname + '/src/js/index.js',
output: {
path: __dirname + '/grails-app/assets/javascripts',
publicPath: '/assets/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
}
};
module.exports = config;
This is my .babelrc
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.json (I run in prod mode so ignore devDependencies):
{
"name": "KahuDealerWeb",
"version": "1.0.0",
"description": "Vehicle Finance 3.0 ====================",
"main": "index.js",
"directories": {
"lib": "lib",
"test": "test"
},
"scripts": {
"watch": "webpack --watch --colors --progress",
"bundle": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ProconGPS/KahuDealerWeb.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ProconGPS/KahuDealerWeb/issues"
},
"homepage": "https://github.com/ProconGPS/KahuDealerWeb#readme",
"dependencies": {
"@babel/core": "^7.0.1",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.10.1",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^4.10.1",
"@material-ui/icons": "^4.9.1",
"axios": "^0.19.0",
"babel-loader": "^8.0.2",
"core-js": "^3.1.3",
"css-loader": "^3.5.3",
"lodash": "^4.17.11",
"material-ui-icons": "^1.0.0-beta.36",
"node-sass": "^4.10.0",
"react": "^16.13.1",
"react-cookies": "^0.1.0",
"react-dom": "^16.13.1",
"react-modal": "^3.11.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-select": "^2.2.0",
"react-to-print": "^2.5.1",
"recharts": "^1.8.5",
"redux": "^3.7.2",
"redux-observable": "^0.18.0",
"rxjs": "^5.5.6",
"rxjs-compat": "^6.3.3",
"style-loader": "^1.2.1",
"webpack": "^4.18.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
Flow syntax is not real JS. so things like type Props will fall apart when transpiling or bundling. You need to add a babel plugin/preset to handle these cases.
This is what you're looking to add: https://babeljs.io/docs/en/babel-preset-flow
But specifically,
Install @babel/preset-flow with either yarn or npm
Then in your .babelrc update your config to add the new preset
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-flow"
]
}
这篇关于反应流中的Props类型错误，将create-react应用程序转换为webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
