Babel 7 upgrade: #babel/helper-module-imports - reactjs

Question

I'm upgrading a Babel 6 project (6.14.0) and, I've had issues after running the Babel upgrader (npx babel-upgrade --write)
I've run npm install #babel/helper-module-imports but, doesn't seem to fix anything at all.
The error message I get is the following: (But for every single component...which is a lot of them)
ERROR in ./src/components/TableData/index.js Module build failed: Error: src/components/TableData/index.js: This API has been removed. If you're looking for this functionality in Babel 7, you should import the '#babel/helper-module-imports' module and use the functions exposed from that module, such as 'addNamed' or 'addDefault'.
Any guide on how this is meant to be solved? Or where should I look at? (I've installed the package but no luck...Tried deleting package.lock.json and node_modules, no luck.)
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"
]
}
]
}
},
}
As for the table file, here's a snapshot.
Something odd is that it used to work fine pre-upgrade although, we ran the linter and the fragment short-syntax <> was added. Not sure if that is a pinpoint area.
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;

Answer 1

I was able to solve it, the issue was the package:
babel-plugin-react-transform
It was being imported thus, removing/updating to hot-loader solved it.
Hope this helps whoever finds on this situation.