35

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
0

6 Answers 6

42

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

Using npm:

npm install --save @babel/runtime

Using yarn:

yarn add @babel/runtime

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.

1
  • 1
    Just saving the recent version of @babel/runtime as answered by @Kenn was enough for me, no need for a specific beta version. Jul 24, 2022 at 10:52
15

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.

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"]
},
2
  • Where do you put that? Jul 27, 2020 at 10:34
  • webpack.config.js exports
    – arifnpm
    Jul 28, 2020 at 5:45
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.