React 流程中的 Props 类型错误,将 create-react 应用程序转换为 webpack
Error on type Props in react flow, converting create-react app to webpack
我正在尝试将 create-react 应用程序转换为 webpack 应用程序。这背后的背景是我最初有一个使用 create-react 制作的应用程序。我想 运行 使用 webpack 的那个项目。我拿了一个我在 webpack 上 运行ning 的应用程序,然后我删除了它的所有源文件,用 create react 应用程序中的源文件替换了它。之后,我将 package.json 依赖项从 create-react 应用程序的 package.json 中移出。我想也许我需要在 webpack 中进行一些额外的配置来处理流程。我需要故障排除方面的帮助。我收到此类错误:
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 = {
这是我的 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;
这是我的 .babelrc
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.json(我在生产模式下 运行 所以忽略 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 语法不是真正的 JS。所以像 type Props
这样的东西在转译或捆绑时会分崩离析。您需要添加一个 babel plugin/preset 来处理这些情况。
这是您要添加的内容:
https://babeljs.io/docs/en/babel-preset-flow
但具体来说,
使用 yarn 或 npm
安装 @babel/preset-flow
然后在您的 .babelrc
中更新您的配置以添加新预设
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-flow"
]
}
我正在尝试将 create-react 应用程序转换为 webpack 应用程序。这背后的背景是我最初有一个使用 create-react 制作的应用程序。我想 运行 使用 webpack 的那个项目。我拿了一个我在 webpack 上 运行ning 的应用程序,然后我删除了它的所有源文件,用 create react 应用程序中的源文件替换了它。之后,我将 package.json 依赖项从 create-react 应用程序的 package.json 中移出。我想也许我需要在 webpack 中进行一些额外的配置来处理流程。我需要故障排除方面的帮助。我收到此类错误:
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 = {
这是我的 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;
这是我的 .babelrc
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.json(我在生产模式下 运行 所以忽略 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 语法不是真正的 JS。所以像 type Props
这样的东西在转译或捆绑时会分崩离析。您需要添加一个 babel plugin/preset 来处理这些情况。
这是您要添加的内容: https://babeljs.io/docs/en/babel-preset-flow
但具体来说, 使用 yarn 或 npm
安装@babel/preset-flow
然后在您的 .babelrc
中更新您的配置以添加新预设
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-flow"
]
}