Getting Cannot find module '@babel/plugin-proposal-private-property-in-object' when running React App

Question

I created a React App using npx create-react-app my_app but when I am running the app using npm start, I am getting the following error,

I tried installing the package '@babel/plugin-proposal-private-property-in-object' using npm install @babel/plugin-proposal-private-property-in-object but still getting the same error. How to solve this?

Aliquot

Says here that this plugin is already included in babel/preset-env. Are you sure you need to be installing it separately at all? Might be a bug with create-react-app if you're actually doing a fresh bootstrap – Zebadiah

No we do not need to install the package separately, Idk why it's showing an error this time. – Aliquot

Please don't post code, exceptions, or results as images. They can't be copied (partly) for answering and their "text" won't appear in search engines. – Widgeon

Answer 1

Here is a combination of babel packages that worked for me:

"devDependencies": {
    "@babel/core": "7.22.5",
    "@babel/eslint-parser": "7.22.5",
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@babel/preset-env": "7.22.5",
}

IMPORTANT STEP

Add @babel/plugin-proposal-private-property-in-object to .babelrc plugins as well.

Something like this:

"plugins": [
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]

Permian

Answer 2

This error occurs when Babel plugin is missing or not installed. Add "@babel/plugin-proposal-private-property-in-object": "^7.21.0", to the list of dependencies in the package.json file like:

"dependencies": {

"@babel/plugin-proposal-private-property-in-object": "^7.21.0",

Downstroke

Answer 3

for me the only thing helps was to install the @babel/plugin-proposal-private-property-in-object package and then remove the node_modules folder with rm -rf node_modules --force and then reinstall it

Jacquerie

Great! you saved my day Thanks – Eggshaped

Answer 4

After receiving a warning "One of your dependencies, babel-preset-react-app, is importing the package "@babel/plugin-proposal-private-property-in-object" without declaring it in its dependencies. This is currently working because the package "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time." I reinstalled @babel/plugin-proposal-private-property-in-object from the website https://www.npmjs.com/package/@babel/plugin-proposal-private-property-in-object.

Tiptop

Answer 5

I discovered that when you save this code in package.json, an additional error will show up. However, if you remove it and save it again, both issues are resolved and the code compiles perfectly.

  "devDependencies": {
    "@babel/plugin-transform-private-property-in-object": "^7.23.3"
  }

(If someone knows a permanent solution, please do reply to this)

Opalescent

Answer 6

Step 1: Add a babel.config.js file to the root of the project

Step2: 2: Run this code in the terminal

npm i @babel/plugin-transform-private-property-in-object

Step 3: Add the code below to the Babel.config file

plugins: [
    ...
    require('@babel/plugin-proposal-private-property-in-object').default,
    require('@babel/plugin-proposal-private-methods').default
];

Step 4: Add these lines of code to the package.json file

  "devDependencies": {
  "@babel/plugin-transform-private-property-in-object": "^7.23.3"
 },

Frock

Answer 7

Followed all the above resolutions but still receive this error when examining 'http://localhost:3000/' in a browser:

Compiled with problems:

ERROR in ./src/MinimizableWebChat.js 11:0-67

Module not found: Error: Can't resolve 'botframework-webchat' in '/Users/miteshparmar/Documents/WebSite_creation/BotFramework-WebChat-main/samples/06.recomposing-ui/a.minimizable-web-chat/src'


ERROR in ./src/WebChat.js 7:0-86

Module not found: Error: Can't resolve 'botframework-webchat' in '/Users/miteshparmar/Documents/WebSite_creation/BotFramework-WebChat-main/samples/06.recomposing-ui/a.minimizable-web-chat/src'

Also my Mac Terminal shows the following:

Failed to compile.
Module not found: Error: Can't resolve 'botframework-webchat' in '/Users/miteshparmar/Documents/WebSite_creation/BotFramework-WebChat-main/samples/06.recomposing-ui/a.minimizable-web-chat/src'
ERROR in ./src/MinimizableWebChat.js 11:0-67
Module not found: Error: Can't resolve 'botframework-webchat' in '/Users/miteshparmar/Documents/WebSite_creation/BotFramework-WebChat-main/samples/06.recomposing-ui/a.minimizable-web-chat/src'

ERROR in ./src/WebChat.js 7:0-86
Module not found: Error: Can't resolve 'botframework-webchat' in '/Users/miteshparmar/Documents/WebSite_creation/BotFramework-WebChat-main/samples/06.recomposing-ui/a.minimizable-web-chat/src'

webpack compiled with 2 errors

Deeannadeeanne

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Cisalpine