Closed2

preset-env経由でpolyfillを入れるとreactがimportされなくなる

sadnessOjisansadnessOjisan

いまこういう簡単なエントリポイントを用意する。

import { render } from "react-dom";

const App = () => {
  return <h1>hello world!!</h1>;
};

render(<App />, document.getElementById("root"));

babel.config.js を

babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
  ],
};

にしてこれを babel-loader 経由でビルドすると、

WARNING in ./src/index.jsx 5:22-26
export 'jsx' (imported as '_jsx') was not found in 'react/jsx-runtime' (possible exports: __esModule)

WARNING in ./src/index.jsx 10:0-6
export 'render' (imported as 'render') was not found in 'react-dom' (possible exports: __esModule)

WARNING in ./src/index.jsx 10:21-25
export 'jsx' (imported as '_jsx') was not found in 'react/jsx-runtime' (possible exports: __esModule)

という警告が出る。
実際、コンパイルはされていない。

ここで polyfill 周りの設定を消してみる。

babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        // useBuiltIns: "usage",
        // corejs: 3,
      },
    ],
    [
      "@babel/preset-react",
      {
        runtime: "automatic",
      },
    ],
  ],
};

これでビルドすると、先ほどの警告は消えてうまくコンパイルされている。

なんでこうなるのですか?

repository

動く時: https://github.com/ojisan-toybox/react-ie11/tree/de86aa5b2c391c0d3d81498672df81182c18d5b2
動かない時: https://github.com/ojisan-toybox/react-ie11/tree/0b3a9fa4e8e0bb938991f4d648930b989cf272c5

このスクラップは2021/04/30にクローズされました