New version of dynamic import is breaking imports in Webpack

[studiopersona]

I've found this new version of dynamic importing in one of our libraries that has been created by @babel/cli:

var importLayout = function importLayout(layout) {
  return /*#__PURE__*/(0, _react.lazy)(function () {
    return function (specifier) {
      return new Promise(function (r) {
        return r(specifier);
      }).then(function (s) {
        return (0, _interopRequireWildcard2.default)(require(s));
      });
    }("./../block/").then(function (module) {
      return module.default ? {
        default: module.default
      } : {
        default: module[layout]
      };
    }).catch(function (err) {
      console.log(err);
    });
  });
};

The import file cannot be found using this method with Webpack. Quoting from this article https://javascript.plainenglish.io/how-webpack-handles-dynamic-imports-with-variable-paths-9c598a2aa4e3:

if you import a file with a variable path, at least some part of that path needs to be explicit in the string...

// this works
const fileName = 'image.jpg';
let module = await import(`./assets/images/${fileName}`);

// this doesn't work
const path = './assets/images/image.jpg';
module = await import(path);

...The way Webpack does it is by analyzing the interpolated string path during the build process, then getting the explicit path part from the string, in this example assets/images/, and then copy all the files from that folder to the build folder.
Since Webpack does that by analyzing string in the import statement, it's not able to know which files to copy when the whole path is a variable without an explicit string part.

By using require(s) there is no explicit string for Webpack to use and the import always fails, with ERROR: Cannot find module.
I have been able to prove this is the issue by replacing the variable s in the code above with a the string "./../block/", so we have require("./../block/"). After doing this the import can be found.

Here is the previous version of dynamic importing, which worked, in which you can see the require() parameter is set as a string:

var importLayout = function importLayout(layout) {
  return /*#__PURE__*/(0, _react.lazy)(function () {
    return Promise.resolve().then(function () {
      return (0, _interopRequireWildcard2.default)(require("./../block/"));
    }).then(function (module) {
      return module.default ? {
        default: module.default
      } : {
        default: module[layout]
      };
    }).catch(function (err) {
      console.log(err);
    });
  });
};

How do we go about getting this issue resolved, without having to resort to requiring an older version of @babel/cli?

[nicolo-ribaudo]

What is your Babel config? You don't need to compile dynamic imports if you are using webpack.

[studiopersona]

Here are the relevant parts of our package.json file:

"dependencies": {
    "@brightcove/player-loader": "^1.8.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.29.3",
    "html-react-parser": "^3.0.4",
    "react": "^18.2.0",
    "react-datepicker": "^4.10.0",
    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
    "react-scripts": "5.0.1",
    "sass": "^1.54.5",
    "web-vitals": "^2.1.4"
  },
"babel": {
    "presets": [
      [
        "react-app",
        {
          "absoluteRuntime": false
        }
      ]
    ]
  },
  "browserslist": {
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version",
      "ie 11"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/node-logger": "^6.5.10",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "babel-plugin-named-exports-order": "^0.0.2",
    "chromatic": "^6.9.0",
    "cross-env": "^7.0.3",
    "prop-types": "^15.8.1",
    "webpack": "^5.74.0"
  },

We execute this command to run the build:
cross-env BABEL_ENV=production babel src -d dist --copy-files