37

I am working on a project of react and I am getting the following error after implement this package https://www.npmjs.com/package/react-bootstrap-typeahead then i get the following error.

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.

I found many solutions and I tried it too https://github.com/jquense/yup/issues/216 but still getting same error.

But when i remove Typeahead component then it works fine.

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
  • 571
  • 1
  • 4
  • 10

6 Answers6

45

You can install @babel/runtime to fix the problem:

Using npm:

npm install --save @babel/runtime

Using yarn:

yarn add @babel/runtime

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Kenn
  • 587
  • 1
  • 5
  • 7
19

I found a solution

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

Then delete the package-json.lock file and node_modules folder then re-install with npm install.

It works for me.

ggorlen
  • 44,755
  • 7
  • 76
  • 106
amaan rajput
  • 571
  • 1
  • 4
  • 10
  • 1
    Just saving the recent version of `@babel/runtime` as answered by @Kenn was enough for me, no need for a specific beta version. – thisismydesign Jul 24 '22 at 10:52
17

Make sure you got @babel/runtime installed into your regular dependencies and not the devDependencies (leave out the --dev or the -D flag when installing).

npm i @babel/runtime

OR

yarn add @babel/runtime

Else it's going to be missing when doing a production installation (which leaves out the devDependencies section), which is what happened to me.

All provided answers are correct in most cases but I wanted to add an explanation: Babel's runtime is a production runtime that ships with your code so it can't just be left out because it runs on the client.

gekkedev
  • 562
  • 4
  • 18
4

For me, i solve this by adding .js and .jsx as a resolvable extensions as objectWithoutPropertiesLoose is without extension.

resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
},
arifnpm
  • 357
  • 1
  • 7
3

I had similar issue with pnpm and solved it by adding in .npmrc :

hoist-pattern[]=@babel/runtime

and install @babel/runtime to production dependencies (no -D flag!)

pnpm add @babel/runtime
Greg Motyl
  • 2,478
  • 17
  • 31
2

For me, I have to use these configurations on my webpack.config.js file

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

I know this is an old issue, but it may help someone else

Ahmed Tarek
  • 318
  • 3
  • 9