TypeScript React Babel ReferenceError：找不到变量：regeneratorRuntime

Question

我正在学习 typescript、react 和 babel。这是我的代码

export default function App() : JSX.Element {
    console.log('+++++ came inside App +++++++ ');
    const {state, dispatch} = useContext(Store);
    useEffect(() => {
        console.log('came inside use effect')
        state.episodes.length === 0 && fetchDataAction()
    });

    const fetchDataAction = async () => {
        console.log('came inside fetch data');
        const URL = 'https://api.tvmaze.com/singlesearch/shows?q=rick-&-morty&embed=episodes';
        const data = await fetch(URL);
        const dataJson = await data.json();
        return dispatch({
            type: 'FETCH_DATA',
            payload: dataJson._embedded.episodes
        })
    }
    return (
        <Fragment>
            <h1>Rick and Morty</h1>
            <p>Pick your favorite episode!!!</p>
            {console.log(state)}
        </Fragment>
    )
}

当我尝试从我的组件进行同步调用时，出现此错误

ReferenceError: Can't find variable: regeneratorRuntime
(anonymous function) — App.tsx:29
App — App.tsx:63
renderWithHooks — react-dom.development.js:16260
mountIndeterminateComponent — react-dom.development.js:18794
callCallback — react-dom.development.js:336
dispatchEvent
invokeGuardedCallbackDev — react-dom.development.js:385
invokeGuardedCallback — react-dom.development.js:440
beginWork$$1 — react-dom.development.js:25780
performUnitOfWork — react-dom.development.js:24698
workLoopSync — react-dom.development.js:24671
performSyncWorkOnRoot — react-dom.development.js:24270
scheduleUpdateOnFiber — react-dom.development.js:23698
updateContainer — react-dom.development.js:27103
(anonymous function) — react-dom.development.js:27528
unbatchedUpdates — react-dom.development.js:24433
legacyRenderSubtreeIntoContainer — react-dom.development.js:27527
Eval Code — index.tsx:13
eval
./src/index.tsx — bundle.js:613
__webpack_require__ — bundle.js:20
Eval Code — client:2
eval
(anonymous function) — bundle.js:624
__webpack_require__ — bundle.js:20
(anonymous function) — bundle.js:84
Global Code — bundle.js:85
logCapturedError — react-dom.development.js:21843

我用谷歌搜索并找到了这个帖子Async/Await ReferenceError: Can't find variable: regeneratorRuntime

但我仍然不知道这个人究竟做了什么来解决问题。有人可以向我解释一下解决方案吗？我不知道 polyfill 是什么。

这是我的全部代码，显示了我的 babel 和 webpack 配置 https://github.com/abhsrivastava/react-rick-and-morty

Answer 1

我一直在谷歌搜索和试验，我能够解决问题。这是一个更一步一步的答案。

1. 纱线添加@babel/runtime
2. yarn add -D @babel/plugin-transform-runtime

现在对.babelrc 文件进行以下更改

{
    "presets": ["@babel/preset-env", "@babel/typescript", "@babel/react"],
    "plugins": [
        ["@babel/plugin-transform-runtime",
        {
          "regenerator": true
        }]
      ]
}

进行这些更改后，所有 4 个问题都解决了

1. Babel ReferenceError：找不到变量：regeneratorRuntime
2. 错误：找不到模块“@babel/runtime/helpers/slicedToArray”
3. 模块构建失败：TypeError：this.setDynamic 不是函数
4. “polyfill”选项已被删除。 @babel/runtime 模块现在默认跳过 polyfill。