Closed2
preset-env経由でpolyfillを入れるとreactがimportされなくなる
いまこういう簡単なエントリポイントを用意する。
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にクローズされました