Correção da importação dinâmica

[Oda2]

Boa noite André, essa é uma proposta para a correção de importação dinâmica, não necessariamente é a melhor solução.

Problema:

Ao se criar um componente com importação dinâmica da seguinte maneira:

  const LibTeste = '@material-ui/core/Grid';
  const [Comp, setComp] = useState(null);
  const handleTeste = () => {
    setComp(React.lazy(() => import(`${LibTeste}`)));
  };

A transpilação para o babel gera algo como:

  var handleTeste = function handleTeste() {
    setComp(_react.default.lazy(function () {
      return Promise.resolve("".concat(LibTeste)).then(function (s) {
        return (0, _interopRequireWildcard2.default)(require(s));
      });
    }));

Problemática desta transpilação é que o webpack não consegue interpretar require como uma variável o correto seria a própria string, este bug começou a ocorrer atualmente nas última versão do preset-env.

Exemplo da forma correta de saída para o webpack:

  var LibTeste = '@material-ui/core/Grid';
  var handleTeste = function handleTeste() {
  setComp(_react.default.lazy(function () {
    return Promise.resolve().then(function () {
      return (0, _interopRequireWildcard2.default)(require("".concat(LibTeste)));
    });
  }));

Por isso que eu disse que a proposta é uma possível solução (não sendo a melhor) pois a saída com essa implementação seria algo como:

  var LibTeste = '@material-ui/core/Grid';
  var handleTeste = function handleTeste() {
    setComp(_react.default.lazy(function () {
      return import("".concat(LibTeste));
    }));
  };

Não compatível com todos os navegadores 😢

[andrelmlins]

Importação dinâmica não é algo tão comum em biblioteca. O melhor seria ter uma solução que funcionasse para todos os navegadores.

[Oda2]

Concordo, inclusive estava realizando uns teste fazendo com rollup seguindo o mesmo model de configurações proposto e a saída é algo em torno disso:

    var handleClick = function handleClick() {
      var arroz = '@material-ui/core/Grid';
      setMyComponent(React__default.lazy(function () {
        return import("".concat(arroz));
      }));
    };

Olhando para a implementação de saída não vejo problema a nível de compatibilidade hoje em dia como o link abaixo:

https://caniuse.com/#feat=es6-module-dynamic-import

o que você acha?