Babel can't resolve imports in it its own source code

Bug Report

I have upgraded a React project to Webpack 5. The aliases are resolved by Babel. Everything was working fine with Webpack 4. But when launching webpack dev server, Babel makes the build crash because it can’t resolve its own imports (inside its source code).

I’ve checked Babel runtime’s node modules. Everything looks great, but I get this error when launching webpack dev server:

ERROR in ../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 4:0-52
Module not found: Error: Can't resolve './nonIterableSpread' in '/Users/MyName/Desktop/MyApp/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableSpread.js'?
BREAKING CHANGE: The request './nonIterableSpread' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ../../node_modules/rc-slider/es/Range.js 2:0-78 77:43-61 193:23-41 337:23-41
 @ ../../node_modules/rc-slider/es/index.js 2:0-28 6:23-28 10:0-50
 @ ../../kit/src/form/slider/index.tsx
 @ ../../kit/src/form/index.tsx 27:41-71
 @ ../shared/src/panels/card-library/index.tsx 10:15-38
 @ ./src/pages/main.tsx 12:47-93
 @ ./src/app.tsx 11:39-82
 @ ./src/index.tsx 6:38-54

I know the issue comes from aliases resolution because I don’t get these errors when commenting the alias: {} part in webpack ( alias is automatically filled by babel aliases with this script):

const { isArray, size, get, find, reduce } = require("lodash");
const path = require("path");
const BabelConfig = require("../../../babel.config");

const findModuleResolverPlugin = (plugins) => {
  return (
    find(plugins, (plugin) => {
      return isArray(plugin) && plugin[0] === "module-resolver";
    }) || []
  );
};

const getModuleResolverAliasPlugin = (configuration = {}) => {
  const plugin = findModuleResolverPlugin(configuration.plugins);
  if (size(plugin)) {
    return get(plugin[1], "alias", {});
  } else {
    return {};
  }
};

const getBabelAliases = (rootPath = "") => {
  return reduce(
    getModuleResolverAliasPlugin(BabelConfig),
    (aliases, p, alias) => {
      aliases[alias] = path.resolve(rootPath, p);
      return aliases;
    },
    {}
  );
};

module.exports = getBabelAliases;

Expected behavior babel should resolve aliases, as it was perfectly doing it with webpack 4.

Environment

  System:
    OS: macOS 10.15.6
  Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    Yarn: 1.22.5 - ~/Desktop/frontflip/node_modules/.bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
  Monorepos:
    Yarn Workspaces: 1.22.5
    Lerna: 3.22.1
  npmPackages:
    @babel/cli: ^7.12.10 => 7.12.10
    @babel/core: ^7.12.10 => 7.12.10
    @babel/node: ^7.12.10 => 7.12.10
    @babel/plugin-proposal-class-properties: ^7.12.1 => 7.12.1
    @babel/plugin-syntax-dynamic-import: ^7.7.4 => 7.8.3
    @babel/plugin-transform-object-assign: ^7.12.1 => 7.12.1
    @babel/plugin-transform-regenerator: ^7.12.1 => 7.12.1
    @babel/plugin-transform-runtime: ^7.12.10 => 7.12.10
    @babel/plugin-transform-typescript: ^7.12.1 => 7.12.1
    @babel/preset-env: ^7.12.11 => 7.12.11
    @babel/preset-react: ^7.12.10 => 7.12.10
    @babel/preset-typescript: ^7.12.7 => 7.12.7
    babel-eslint: ^10.1.0 => 10.1.0
    babel-jest: ^26.1.0 => 26.3.0
    babel-loader: ^8.1.0 => 8.1.0
    babel-plugin-module-resolver: ^4.1.0 => 4.1.0
    babel-plugin-react-css-modules: ^5.2.6 => 5.2.6
    babel-plugin-typescript-to-proptypes: ^1.4.2 => 1.4.2
    eslint: ^7.10.0 => 7.10.0
    jest: ^26.1.0 => 26.4.2
    lerna: ^3.20.2 => 3.22.1
    webpack: ^5.18.0 => 5.18.0

Additional context Here is my Babel config file:

module.exports = {
    ignore: ["node_modules"],
      babelrcRoots: ["."],
      presets: [
        "@babel/preset-typescript",
        [
          "@babel/preset-env",
          {
            targets: {
              browsers: ["defaults"],
            },
          },
        ],
        "@babel/preset-react",
      ],
      env: {
        test: {
          plugins: [
            [
              "babel-plugin-react-css-modules",
              {
                generateScopedName: "[local]",
                filetypes: {
                  ".less": {
                    syntax: "postcss-less",
                  },
                },
              },
            ],
            //
          ],
        },
        development: {
          plugins: [
            [
              "babel-plugin-react-css-modules",
              {
                webpackHotModuleReloading: true,
                generateScopedName: "[local]___[hash:base64:5]",
                handleMissingStyleName: "warn",
                filetypes: {
                  ".less": {
                    syntax: "postcss-less",
                  },
                },
              },
            ],
            // "react-hot-loader/babel"
          ],
        },
        production: {
          plugins: [
            [
              "babel-plugin-react-css-modules",
              {
                webpackHotModuleReloading: true,
                generateScopedName: "[hash:base64]",
                filetypes: {
                  ".less": {
                    syntax: "postcss-less",
                  },
                },
              },
            ],
          ],
        },
      },
      plugins: [
        "@babel/plugin-transform-object-assign",
        "@babel/plugin-transform-regenerator",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-modules-commonjs",
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        [
          "module-resolver",
          {
            cwd: "babelrc",
            root: "./",
            alias: {
              "@components": "./components/src",
              "@pages": "./pages/src",
              "@assets": "./assets",
            },
          },
        ],
      ],
    };

[nicolo-ribaudo]

This was fixed in 7.12.0: starting from that version we don’t use import ... from "./..." anymore (toConsumableArray source). I suggest running yarn dedupe or npx yarn-deduplicate (depending on your Yarn version) to remove @babel/runtime@7.11.2 from your lockfile.

Or you could also just try to remove @babel/runtime and @babel/runtime-corejs3 from your lockfile and re-running yarn.

[DoneDeal0]

Nice! Thanks for your help!