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

Question

我正在开发一个React项目，使用了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

- amaan rajput

Answer 1

你可以安装@babel/runtime来解决问题： 使用npm： npm install --save @babel/runtime 使用yarn： yarn add @babel/runtime

- Kenn

Answer 2

我找到了一个解决办法

npm install --save-exact @babel/runtime@7.0.0-beta.55

然后删除package-json.lock文件和node_modules文件夹，然后使用npm install重新安装。

这对我很有效。

- amaan rajput

---

只需按照@Kenn的回答保存最近版本的@babel/runtime即可，无需特定的beta版本。 - thisismydesign

Answer 3

确保在您的常规依赖项(dependencies)中安装了@babel/runtime，而不是开发依赖(devDependencies)（安装时省略--dev或-D标志）。

npm i @babel/runtime

或者

yarn add @babel/runtime

否则，在进行生产安装时（不包括devDependencies部分），会缺失它，这就是我所遇到的情况。

提供的所有答案在大多数情况下都是正确的，但我想补充一下解释：Babel运行时是一个随代码发布的生产运行时，因此不能省略，因为它在客户端上运行。

- gekkedev

Answer 4

对我来说，我通过将 .js 和 .jsx 添加为可解析的扩展名，因为 objectWithoutPropertiesLoose 没有扩展名。

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

- arifnpm

---

你把它放在哪里？ - Tomáš Zato

webpack.config.js 导出 - arifnpm

是的，这对我也起作用。我遇到的问题是，我有一些 mjs 模块，当导出时没有在 index.mjs 中包含扩展名，因此 webpack 无法解析文件扩展名，我会得到与原始问题中提到的类似的运行时错误。在我的情况下，将 .mjs 添加到数组中解决了这个问题。我会建议，如果你的 webpack 抱怨无法解析模块，请首先尝试这个方法，因为它很简单，你只需要将它添加到你的 webpack 配置中。 - undefined

Answer 5

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

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

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

- Ahmed Tarek

Answer 6

我曾遇到与pnpm类似的问题，并通过在.npmrc中添加以下内容解决了这个问题:

hoist-pattern[]=@babel/runtime

并将@babel/runtime安装到生产依赖项中（不要使用-D标志！）

pnpm add @babel/runtime

- Greg Motyl