How to fix - Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose'

Question

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

Answer 1

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

Using npm:

npm install --save @babel/runtime

Using yarn:

yarn add @babel/runtime

Answer 2

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.

Answer 3

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.

Answer 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"]
},

Answer 5

You can try the following solution

To install it, you can run: npm install --save @babel/runtime/helpers/builtin/objectWithoutPropertiesLoose

OR

npm add @babel/runtime

Hope it works for you .

Answer 6

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