我正在升级 Babel 6 项目 (6.14.0)，在运行 Babel 升级程序 (npx babel-upgrade --write) 后我遇到了问题
我已经运行了 npm install @babel/helper-module-imports 但是，似乎根本没有解决任何问题。
我收到的错误消息如下:(但是对于每个单独的组件......其中有很多)
./src/components/TableData/index.js 中的错误模块构建失败:错误:src/components/TableData/index.js:此 API 已被删除。如果你在 Babel 7 中寻找这个功能，你应该导入 '@babel/helper-module-imports' 模块并使用从该模块公开的函数，例如 'addNamed' 或 'addDefault'。
关于如何解决这个问题的任何指南？或者应该去哪里看？ (我已经安装了这个包，但没有运气......尝试删除 package.lock.json 和 node_modules，没有运气。)
Package.JSON:
"dependencies": {
"@babel/polyfill": "^7.0.0",
"@babel/runtime-corejs2": "^7.0.0",
"@carbon/icons-react": "^10.3.0",
"axios": "^0.16.2",
"axios-retry": "^3.1.8",
"body-parser": "1.15.2",
"bootstrap": "^3.4.1",
"bootstrap-social": "^5.1.1",
"carbon-components": "^10.3.0",
"carbon-components-react": "^7.3.0",
"carbon-icons": "^7.0.7",
"chart.js": "^2.6.0",
"cookie-parser": "1.4.3",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react-app": "^5.2.1",
"eslint-plugin-prettier": "^3.1.4",
"eventemitter3": "1.2.0",
"express": "4.14.0",
"express-jwt": "3.4.0",
"fastclick": "1.0.6",
"fbjs": "0.8.4",
"font-awesome": "^4.7.0",
"history": "3.0.0",
"isomorphic-style-loader": "1.0.0",
"jquery": "^3.1.1",
"js-cookie": "^2.2.1",
"material-ui": "^0.19.4",
"material-ui-chip-input": "^0.18.2",
"moment": "^2.24.0",
"node-fetch": "1.6.0",
"normalize.css": "4.2.0",
"pretty-error": "2.0.0",
"react": "^16.8.3",
"react-bootstrap": "^0.32.4",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-typeahead": "^3.3.5",
"react-chartjs-2": "^2.7.4",
"react-chat-ui": "^0.3.2",
"react-collapsible": "^2.6.0",
"react-dom": "^16.8.3",
"react-jsonschema-form": "^1.8.1",
"react-redux": "^7.2.0",
"react-select": "^2.4.1",
"react-table": "^6.9.2",
"redux": "^4.0.4",
"redux-saga": "^1.0.2",
"source-map-support": "^0.4.18",
"universal-router": "1.2.2",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/helper-module-imports": "^7.10.4",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-react-constant-elements": "^7.0.0",
"@babel/plugin-transform-react-inline-elements": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/template": "^7.0.0",
"@babel/types": "^7.0.0",
"assets-webpack-plugin": "^3.4.0",
"autoprefixer": "^6.4.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-loader": "7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-rewire": "^1.0.0-rc-7",
"babel-preset-node5": "^11.1.0",
"browser-sync": "^2.14.3",
"chai": "^3.5.0",
"css-loader": "^0.24.0",
"del": "^2.2.2",
"enzyme": "^2.4.1",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"extend": "^3.0.0",
"file-loader": "^0.9.0",
"gaze": "^1.1.1",
"git-repository": "^0.1.4",
"glob": "^7.0.6",
"json-loader": "^0.5.4",
"mkdirp": "^0.5.1",
"mocha": "^3.0.2",
"ncp": "^2.0.0",
"pixrem": "^3.0.2",
"pleeease-filters": "^3.0.0",
"postcss": "^5.1.2",
"postcss-calc": "^5.3.1",
"postcss-color-function": "^2.0.1",
"postcss-custom-media": "^5.0.1",
"postcss-custom-properties": "^5.0.1",
"postcss-custom-selectors": "^3.0.0",
"postcss-flexbugs-fixes": "^2.0.0",
"postcss-import": "^8.1.2",
"postcss-loader": "^0.11.1",
"postcss-media-minmax": "^2.1.2",
"postcss-nesting": "^2.3.1",
"postcss-pseudoelements": "^3.0.0",
"postcss-selector-matches": "^2.0.1",
"postcss-selector-not": "^2.0.0",
"prettier": "2.0.5",
"raw-loader": "^0.5.1",
"react-addons-test-utils": "15.5.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.0",
"sinon": "^2.0.0-pre.2",
"stylelint": "^7.2.0",
"stylelint-config-standard": "^13.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-hot-middleware": "^2.12.2",
"webpack-middleware": "^1.5.1"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"env": {
"test": {
"plugins": [
"rewire"
]
}
},
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind",
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-react-inline-elements"
]
},
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"__DEV__": true
},
"env": {
"browser": true
}
},
"stylelint": {
"extends": "stylelint-config-standard",
"rules": {
"string-quotes": "single",
"property-no-unknown": [
true,
{
"ignoreProperties": [
"composes"
]
}
],
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": [
"global",
"local"
]
}
]
}
},
}
至于表文件，这是一个快照。 奇怪的是它过去在升级前运行良好，尽管我们运行了 linter 并添加了片段 short-syntax <>。不确定那是否是精确定位区域。
Table Index content
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import { BACKEND_ROOT_URL } from "../../constants";
import ApplicationsTable from "./applicationsTable";
class TableData extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
total: 0,
isError: false,
errorMessage: "",
};
this.componentDidMount = this.componentDidMount.bind(this);
}
componentDidMount() {
this.getData();
}
getData() {
const currn = this;
axios
.get(`${this.props.url}/all`)
.then((response) => {
currn.setState({
data: response.data,
total: response.data.length,
});
})
.catch(function (error) {
currn.setState({
isError: true,
errorMessage: error.response.data.message,
});
});
}
render() {
return (
<div className="bx--row">
<div className="bx--col-lg-12">
{this.state.isError == true ? (
<h3 className="bx-error-404">{`Error: ${this.state.errorMessage}`}</h3>
) : (
<>
<ApplicationsTable
data={this.state}
/>
</>
)}
</div>
</div>
);
}
}
export default TableAgents;
最佳答案
我能够解决它，问题是包: babel-plugin-react-transform
它是这样被导入的，删除/更新到热加载器解决了它。
希望这对发现这种情况的人有所帮助。
关于reactjs - Babel 7 升级 : @babel/helper-module-imports，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63027676/