Babel 7 upgrade: @babel/helper-module-imports

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.