如何修复 - 找不到模块：无法解析“@babel/runtime/helpers/objectWithoutPropertiesLoose”

Question

我正在开发一个 React 项目，在实现此包后出现以下错误https://www.npmjs.com/package/react-bootstrap-typeahead然后我收到以下错误。

Failed to compile

./node_modules/react-popper/lib/cjs/Popper.js
Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose' in 'E:\reactjs\deveans-react-version\node_modules\react-popper\lib\cjs'

This error occurred during the build time and cannot be dismissed.

我找到了很多解决方案，我也尝试了https://github.com/jquense/yup/issues/216但仍然遇到同样的错误。

但是当我删除 Typeahead 组件时，它就可以正常工作了。

import React , { Component } from 'react'
import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
class States extends Component {

    state = {
        multiple: false,
        options: [
          {id: 1, label: 'Pakistan'},
          {id: 2, label: 'Indonesia'},
          {id: 3, label: 'Turkey'},
          {id: 4, label: 'Brazil'},
        ]
      };

    render () {

        const {multiple} = this.state;

        return (
          <div>
            <Typeahead
            labelKey="label"
            multiple={multiple}
            options={this.state.options}
            placeholder="Choose a state..."
          />
          </div>
        )
    }
}
export default States

Answer 1

您可以安装

@babel/runtime

来解决问题：

使用 npm：

npm install --save @babel/runtime

使用纱线：

yarn add @babel/runtime

Answer 2

我找到了解决办法

npm install --save-exact @babel/[email protected]

然后删除

package-json.lock

文件和

node_modules

文件夹，然后使用

npm install

重新安装。

它对我有用。

Answer 3

确保您已将

@babel/runtime

安装到常规

dependencies

中，而不是

devDependencies

（安装时省略

--dev

或

-D

标志）。

npm i @babel/runtime

或

yarn add @babel/runtime

否则在进行生产安装时它会丢失（省略了

devDependencies

部分），这就是我遇到的情况。

在大多数情况下，所有提供的答案都是正确的，但我想添加一个解释： Babel 的运行时是随代码一起提供的生产运行时，因此不能因为它在客户端上运行而将其排除在外。

Answer 4

对我来说，我通过添加

js

和

jsx

作为可解析的扩展来解决这个问题，因为

objectWithoutPropertiesLoose

在

webpack.config.js

出口处没有扩展：

resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
},

Answer 5

对我来说，我必须在我的 webpack.config.js 文件中使用这些配置

module: {
 rules: [
   {
     test: /\.m?js/,
     resolve: { fullySpecified: false },
   },
 ],
}

我知道这是一个老问题，但它可能对其他人有帮助

Answer 6

我在 pnpm 上遇到了类似的问题，并通过添加

.npmrc

解决了它：

hoist-pattern[]=@babel/runtime

并将

@babel/runtime

安装到生产依赖项（无 -D 标志！）

pnpm add @babel/runtime